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

Answer 1

I wasted a lot of time with this problem. But later, I realized it was easy. You don't need to import files or write loaderOptions in vuetify.config.js.

1. In your src folder, create a scss folder
2. In your new src/scss folder, create a variables.scss file

📁 src
├─ 📁 scss
|  └─ 📄 variables.scss
...

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

Example

// projectRoot/src/scss/variables.scss

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

After doing all this, stop your local server and restart with npm or yarn only once. After these steps, every change you make will appear automatically. So you don't need to restart the development server every change.

Answer 2

This worked for me on Veutify 3:

Step 1: Install webpack-plugin-vuetify or vite-plugin-vuetify then enable it in your bundler configuration.

Step 2: On your vite.config.ts add
vuetify({ autoImport: true, styles: { configFile: 'src/scss/settings.scss' } }),

Step 3: create settings.scss file on 'src/scss'

Step 4: Add settings on settings.scss example:

@use 'vuetify/settings' with (
    $expansion-panel-text-padding: 0px,
);

Restart npm / clear browser if change did not reflect