覆盖 vuetify 中的 scss 变量

Question

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

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

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

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

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

Answer 1

我在这个问题上浪费了很多时间。但后来我意识到这很容易。

你不需要导入任何文件并在 vuetify.config.js 中编写 loaderOptions

• 在src目录下创建scss目录。
• 将variables.scss 文件放入新目录。 （scss目录）

vuetify-loader 会自动将您的变量引导到 Vue CLI 的编译过程中，覆盖框架默认值。

关注这个documentation。

例如；

遵循这个文件夹结构。

procejtName/src/scss/variables.scss

 // variables.scss

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

完成所有这些操作后，请停止本地服务器并仅使用 npm 或 yarn 重新启动一次。

完成这些步骤后，您所做的每项更改都会自动显示。您不需要每次更改都重新启动开发服务器。