SASS Customization
From version 0.17.0
, this module will configure Nuxt to use the new SASS modern compiler (modern-compiler
). You don't need to change anything in your configuration to use it:
- update
vite
version tov5.4.0
or higher (if you're using Nuxt3.12.4
or higher, you don't need to updatevite
) - replace your
sass
dependency withsass-embedded
If the sass-embedded
dependency is not installed, the module will configure the modern
compiler for you. In case you get errors, enable the disableModernSassCompiler
option in the module configuration to fall back to the legacy
compiler.
Check Build Performance in Vuetify docs for more details.
Overriding SASS Variables
Vuetify allows for overriding global and component-level SASS variables. Setting these up requires configuration that is slightly different from the Vuetify documentation while using this Nuxt module.
In your styles directory (for this example, we'll use
${srcDir}/assets/css
), create two files -${srcDir}/assets/css/globals.scss
and${srcDir}/assets/css/components.scss
In the
globals.scss
file, we'll want to add
@use 'vuetify' with (
// Global Vuetify SASS variable overrides. For example:
// $utilities: false,
// $reset: false,
// $color-pack: false,
// $body-font-family: sans-serif
)
- In the
components.scss
file, we'll want to add
// $button-text-transform-override: capitalize;
@forward 'vuetify/settings' with (
// Component Vuetify SASS variable overrides. See https://vuetifyjs.com/en/features/sass-variables/#variable-api
// For example -- overriding button font capitalization (as seen at the bottom of the v-btn guide here https://vuetifyjs.com/en/api/v-btn/):
// $button-text-transform: $button-text-transform-override,
);
- In your
nuxt.config.ts
, add acss
entry to thedefineNuxtConfig
configuration object that points toglobals.scss
like so:
export default defineNuxtConfig({
css: ['@/assets/css/globals.scss']
// other options
})
TIP
The css property within your defineNuxtConfig
will import all styles from the file that you specify (in our case, globals.scss
) into all components for convenience. Any styles appended to the globals.scss
file in addition to the Vuetify Global Variables override will also be imported into all of your components. If you would like more fine-grained control, consider using a different file for your non-Vuetify global styles, like a separate main.scss
that you import on a component-by-component basis.
- Again in your
nuxt.config.ts
, under the Vuetify module options, disable the Vuetify Styles import for components and instead import thecomponents.scss
override file:
export default defineNuxtConfig({
css: ['@/assets/css/globals.scss'],
vuetify: {
moduleOptions: {
/* module specific options */
/* https://www.youtube.com/watch?v=aamWg1TuC3o */
disableVuetifyStyles: true,
styles: {
configFile: '@/assets/css/components.scss'
},
},
}
// other options
})
You should now be able to override your global Vuetify SASS variables as well as your component-level Vuetify SASS variables. For a full list of variables, check out all of the imports in the index.