Overriding Vuetify variables

user_2662910 0
Viewed 2575

I'm using Vuetify in my project, and I want to use a variable file to override the styles generated by Vuetify.

I'm loading the components and their corresponding styles using the a-la-carte method, so I'm NOT importing the Vuetify SASS file using this:

 @import '~vuetify/src/styles/styles.sass' 
// Not using this method because I don't want to generate styles that are not being used by
// vuetify components I'm not using

Also, my project is using *.scss, not *.sass.

I'm also injecting a global SCSS file containing mixins and other variables in my vue.config.js:

css: {
  sourceMap: productionSourceMap,
  loaderOptions: {
    scss: {
      prependData: `@import '@/scss/_common.scss';`
    }
  }
},

I included a Vuetify variable, $border-radius-root, in that common.scss file, but it doesn't seem to have any effect.

Any idea how to do what I want without having to write entirely new CSS rules to override Vuetify's generated stylesheet? Basically I want to change the units that Vuetify uses using their own stylesheet generator.

vuetify.js vue.js sass
3 Answers

Actually the solution is, and I'm dumb for not thinking of this before, to add another loader to vue.config.js:

css: {
  sourceMap: productionSourceMap,
  loaderOptions: {
    scss: {
      prependData: `@import '@/scss/_common.scss';`
    },
    sass: {
      prependData: `@import '@/sass/_vuetify-variables.sass';`
    }
  }
},

Since vuetify is using sass as the css pre-processor, it needs sass-loader to handle the variable overrides and apply it to the framework.

user_26629100

If you are using Nuxt:

you can add customVariable path in your nuxt.config.js file, in vuetify object

Note you have to enable treeShake. This option is required for custom SASS variables to work

example:

vuetify: {
    // usually file should be in assets folder
    customVariables: ['~/path/to/variables.scss'],
    treeShake: true,
}

If you are using Vue CLI:

  1. Create a folder with name: sass, scss, or styles
  2. Create new file inside this folder and name it: variables.scss or variables.sass

vuetify-loader will automatically bootstrap your variables into Vue CLI’s compilation process, overwriting the framework defaults.

user_112615180

From Vuetify docs:

If you have not installed Vuetify, check out the quick-start guide. Once installed, create a folder called sass, scss or styles in your src directory with a file named variables.scss or variables.sass. The vuetify-loader will automatically bootstrap your variables into Vue CLI's compilation process, overwriting the framework defaults.

So, the vuetify-loader automatically loads @/scss/variables.scss in a Vue CLI project, so you could set $border-radius-root in that file, and it will overrride the framework default.

user_62771510
Related