|
| 1 | +# SASS Customization |
| 2 | + |
| 3 | +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: |
| 4 | +- update `vite` version to `v5.4.0` or higher (if you're using Nuxt `3.12.4` or higher, you don't need to update `vite`) |
| 5 | +- replace your `sass` dependency with `sass-embedded` |
| 6 | + |
| 7 | +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. |
| 8 | + |
| 9 | +Check [Build Performance](https://vuetifyjs.com/en/features/sass-variables/#build-performance) in Vuetify docs for more details. |
| 10 | + |
| 11 | +## Overriding SASS Variables |
| 12 | + |
| 13 | +Vuetify allows for [overriding global and component-level SASS variables](https://vuetifyjs.com/en/features/sass-variables/). Setting these up requires configuration that is slightly different from the Vuetify |
| 14 | +documentation while using this Nuxt module. |
| 15 | + |
| 16 | +1) 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` |
| 17 | + |
| 18 | +2) In the `globals.scss` file, we'll want to add |
| 19 | +```scss |
| 20 | +@use 'vuetify' with ( |
| 21 | + // Global Vuetify SASS variable overrides. For example: |
| 22 | + // $utilities: false, |
| 23 | + // $reset: false, |
| 24 | + // $color-pack: false, |
| 25 | + // $body-font-family: sans-serif |
| 26 | +) |
| 27 | +``` |
| 28 | + |
| 29 | +3) In the `components.scss` file, we'll want to add |
| 30 | +```scss |
| 31 | +// $button-text-transform-override: capitalize; |
| 32 | +
|
| 33 | +@forward 'vuetify/settings' with ( |
| 34 | + // Component Vuetify SASS variable overrides. See https://vuetifyjs.com/en/features/sass-variables/#variable-api |
| 35 | +
|
| 36 | + // For example -- overriding button font capitalization (as seen at the bottom of the v-btn guide here https://vuetifyjs.com/en/api/v-btn/): |
| 37 | + // $button-text-transform: $button-text-transform-override, |
| 38 | +); |
| 39 | +``` |
| 40 | +
|
| 41 | +4) In your `nuxt.config.ts`, add a `css` entry to the `defineNuxtConfig` configuration object that points to `globals.scss` like so: |
| 42 | +```javascript |
| 43 | +export default defineNuxtConfig({ |
| 44 | + css: ['@/assets/css/globals.scss'] |
| 45 | + // other options |
| 46 | +}) |
| 47 | +``` |
| 48 | +
|
| 49 | +> [!TIP] |
| 50 | +> The [css](https://nuxt.com/docs/getting-started/styling#the-css-property) 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. |
| 51 | +
|
| 52 | +5) Again in your `nuxt.config.ts`, under the Vuetify module options, disable the Vuetify Styles import for components and instead import the `components.scss` override file: |
| 53 | +```javascript |
| 54 | +export default defineNuxtConfig({ |
| 55 | + css: ['@/assets/css/globals.scss'], |
| 56 | + vuetify: { |
| 57 | + moduleOptions: { |
| 58 | + /* module specific options */ |
| 59 | + /* https://www.youtube.com/watch?v=aamWg1TuC3o */ |
| 60 | + disableVuetifyStyles: true, |
| 61 | + styles: { |
| 62 | + configFile: '@/assets/css/components.scss' |
| 63 | + }, |
| 64 | + }, |
| 65 | + } |
| 66 | + // other options |
| 67 | +}) |
| 68 | +``` |
| 69 | +
|
| 70 | +You should now be able to override your [global Vuetify SASS variables](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss) as well as your [component-level Vuetify SASS variables](https://vuetifyjs.com/en/features/sass-variables/#variable-api). For a full list of variables, check out [all of the imports in the index](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_index.sass). |
0 commit comments