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

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

有什么想法可以做我想做的事情而不必编写全新的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

来自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，它将覆盖框架的默认值。

覆盖Vuetify变量

2 个答案: