CODEWITHSUNDEEP
vue.jswebpacksassvuetify.js
ParkDyel
ParkDyel

Reputation: 302

override scss variables in vuetify

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

Upvotes: 15

Views: 28876

Answers (2)

mpalencia
mpalencia

Reputation: 6007

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

Upvotes: 7

Emre Arabaci
Emre Arabaci

Reputation: 448

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.

Upvotes: 38

Related Questions