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
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
.
src
folder, create a scss
foldersrc/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.