Question

要增加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";`,
      },
    },
  },
};

但是什么都没有改变。我在做什么愚蠢的事？

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

Answer 1

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

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

在 scss 目录中创建一个 src 目录。
在新目录中放入 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 重新启动一次。

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

在vuetify中覆盖scss变量

1 个答案: