override scss variables in vuetify

Question

To increase the width of vuetify's v-switch, i want to modify the value of vuetify's scss variable.

vuetify was configured through vue-cli, and the developed code is as follows.

// src/assets/css/overrides.scss
$font-size-root: 24px;
$switch-width: 400px;
$switch-track-width: 400px;

// vue.config.js
module.exports = {
  transpileDependencies: ['vuetify'],
  configureWebpack: {
    devtool: 'source-map',
  },
  css: {
    loaderOptions: {
      scss: { // 8.0.3
        prependData: `@import "@/assets/css/overrides.scss";`,
      },
    },
  },
};

But nothing has changed. What stupid thing am i doing?

ref: https://vuetifyjs.com/en/customization/sass-variables/ https://cli.vuejs.org/guide/css.html#css-modules

As specified here you have to place the overrides before the import. // Variables must come before the import — tao
@tao hmm... Is it necessary to import from other places than vue.config.js? — ParkDyel

Emre Arabaci Emre Arabaci · Accepted Answer · 2021-01-11T17:19:20

I wasted a lot of time with this problem. But later I realized it was easy.

You don't need import any file and write loaderOptions in vuetify.config.js

Create a scss directory in src directory.
Put in variables.scss file in new directory. (scss directory)

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

Following this documentation.

For example;

Follow this folder structure.

procejtName/src/scss/variables.scss

 // variables.scss

 $font-size-root: 24px;
 $switch-width: 400px;
 $switch-track-width: 400px;

After you've done all this stop your local server and restart with npm or yarn only once.

After these steps, every change you make will appear automatically. You don't need restart development server every change.

override scss variables in vuetify

1 Answers