在 vuetify 中覆盖 scss 变量

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

这对我在 Veutify 3 上有用：

第 1 步：安装 webpack-plugin-vuetify或vite-plugin-vuetify ，然后在捆绑器配置中启用它。

第 2 步：在您的vite.config.ts添加上
vuetify({ autoImport: true, styles: { configFile: 'src/scss/settings.scss' } }),

第 3 步：settings.scss在“src/scss”上创建文件

步骤 4settings.scss ：在示例中添加设置：

@use 'vuetify/settings' with (
    $expansion-panel-text-padding: 0px,
);

如果更改没有反映，请重新启动 npm / 清除浏览器

Answer 2

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

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

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

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

遵循本文档。

例如;

遵循此文件夹结构。

procejtName/src/scss/variables.scss

 // variables.scss

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

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

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