覆盖 vuetify 中的 scss 变量

为了增加 vuetify 的 v-switch 的宽度，我想修改 vuetify 的 scss 变量的值。

vuetify是通过vue-cli配置的，开发的代码如下。

// 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";`,
      },
    },
  },
};

但一切都没有改变。我在做什么蠢事？

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

我在这个问题上浪费了很多时间。但后来我发现这很容易。您不需要导入文件或写入loaderOptions in vuetify.config.js.

1. In your src文件夹，创建一个scss folder
2. 在你的新src/scss文件夹，创建一个variables.scss file

???? src
├─ ???? scss
|  └─ ???? variables.scss
...

The vuetify-loader会自动将您的变量引导到 Vue CLI 的编译过程中，覆盖框架默认值。下列的本文档 https://vuetifyjs.com/en/features/sass-variables/#vue-cli-install.

Example

// projectRoot/src/scss/variables.scss

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

完成所有这些操作后，停止本地服务器并重新启动npm or yarn只有一次。完成这些步骤后，您所做的每项更改都会自动显示。因此您不需要每次更改都重新启动开发服务器。