覆盖 Vuetify 变量

Question

我在我的项目中使用了 Vuetify，我想使用一个变量文件来覆盖 Vuetify 生成的样式。

我正在使用 a-la-carte 方法加载组件及其相应的样式，因此我不会使用以下方法导入 Vuetify SASS 文件：

 @import '~vuetify/src/styles/styles.sass' 
// Not using this method because I don't want to generate styles that are not being used by
// vuetify components I'm not using

另外，我的项目使用的是*.scss，而不是*.sass。

我还在我的vue.config.js 中注入了一个包含 mixins 和其他变量的全局 SCSS 文件：

css: {
  sourceMap: productionSourceMap,
  loaderOptions: {
    scss: {
      prependData: `@import '@/scss/_common.scss';`
    }
  }
},

我在 common.scss 文件中包含了一个 Vuetify 变量 $border-radius-root，但它似乎没有任何效果。

知道如何在不必编写全新的 CSS 规则来覆盖 Vuetify 生成的样式表的情况下做我想做的事吗？基本上我想改变 Vuetify 使用他们自己的样式表生成器使用的单位。

Answer 1

实际上的解决方案是，我之前没有想到这一点，我很愚蠢，将另一个加载程序添加到vue.config.js：

css: {
  sourceMap: productionSourceMap,
  loaderOptions: {
    scss: {
      prependData: `@import '@/scss/_common.scss';`
    },
    sass: {
      prependData: `@import '@/sass/_vuetify-variables.sass';`
    }
  }
},

由于 vuetify 使用 sass 作为 css 预处理器，它需要 sass-loader 来处理变量覆盖并将其应用于框架。

Answer 2

如果您使用 Nuxt：

您可以在nuxt.config.js 文件中的vuetify 对象中添加customVariable 路径

注意您必须启用treeShake。自定义 SASS 变量需要此选项才能工作

示例：

vuetify: {
    // usually file should be in assets folder
    customVariables: ['~/path/to/variables.scss'],
    treeShake: true,
}

如果您使用的是 Vue CLI：

1. 创建一个文件夹，名称为：sass、scss 或 styles
2. 在此文件夹中创建新文件并将其命名为：variables.scss 或 variables.sass

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

Answer 3

来自Vuetify docs：

如果您尚未安装 Vuetify，请查看 quick-start guide。安装后，在您的 src 目录中创建一个名为 sass、scss 或 styles 的文件夹，其中包含一个名为 variables.scss 或 variables.sass 的文件。 vuetify-loader 会自动将您的变量引导到 Vue CLI 的编译过程中，覆盖框架默认值。

因此，vuetify-loader 会在 Vue CLI 项目中自动加载 @/scss/variables.scss，因此您可以在该文件中设置 $border-radius-root，它将覆盖框架默认值。