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

Stallard

As specified here you have to place the overrides before the import. // Variables must come before the import – Lapin

@Lapin hmm... Is it necessary to import from other places than vue.config.js? – Stallard

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.

Rudyrudyard

Can I override the local $font-size-root in a component? I tried <style lang="scss" scoped>$...</style>. But thats not working – Vernverna

Do you want to change the font size in a single component or the entire application? "$font-size-root" changes the font size of all components. If you want to change the font size in a single component; Define your ".scss" file in your "app.vue" file. Do not use "scoped". Then define the class "testClass {font-size: ...px;}" in your ".scss" file. Finally, try adding this css class to the element you want to change the font size of. If this solution doesn't work, write again. – Rudyrudyard

You don't have to use the "variables.scss" file found in my answer. If you want, you can make this definition in a different ".scss" file. However, if you want to use a different .scss file, you must define the new .scss file you have created in the App.vue file. – Rudyrudyard

Ah ok. I see I will try thanks – Vernverna

someone who gets it working with a custom file name? I'm not able to find any example... – Ballista

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

Rubirubia

Thanks, this is easier to follow than the instructions on the vuetify site - but now it takes ages for Vite to connect each time I run the app – Echidna

@Echidna This might be because of autoImport: true – Grinder