如何在不使用 Vue CLI 的情况下覆盖 Vuetify 2 变量

Posted 2023-02-22

【中文标题】如何在不使用 Vue CLI 的情况下覆盖 Vuetify 2 变量

【英文标题】：How to override Vuetify 2 variables without using Vue CLI

【发布时间】：2020-01-04 17:28:25

【问题描述】：

vuetify 文档仅在vue.config.js 中提供了使用 vue-cli 配置注入 sass 变量的示例 https://vuetifyjs.com/en/customization/sass-variables#markup-js-vue-config-sass-variables

不使用 CLI 时提供修改后的 vuetify 变量的正确方法是什么？

我正在将一个旧项目从 v1 (stylus) 升级到 v2 (sass)，我需要覆盖一些变量，假设我只需要将 font-family 更改为 Arial。

我也在 vuetify 中使用 treeshaking。

现在我有点卡住了，因为我不知道在哪里导入样式覆盖...在 src/main.ts 中导入这些显然不起作用。

我在这里创建了一个最小的复制：https://github.com/Sharsie/vuetify-theme-repro/

到目前为止，我拥有的是 build 目录中的 webpack 配置和 src/styles/main.scss 中的样式覆盖

$body-font-family: Arial;

@import "~vuetify/src/styles/styles.sass";

运行项目会创建一个简单的页面，打印出 v-app 容器的计算样式

  <v-app id="app">
    <v-container>
      <v-content>
        <p>Wanted font-family: Arial</p>
        <p>Current font-family:  fontFamily </p>
      </v-content>
    </v-container>
  </v-app>

【参考方案1】：

在挖掘 vue-cli 的源代码后，我发现配置只是传递给sass-loader 选项，所以解决方案非常简单：

而不是像这样通过vue.config.js 为样式表提供变量：

module.exports = 
  css: 
    loaderOptions: 
      sass: 
        data: `@import "~@/styles/main.scss"`,
      ,
    ,
  ,

你可以像这样直接将它提供给 webpack 配置中的 sass-loader 选项：

module.exports = 
  ...
  module: 
    rules: [
    ...
    
      test: /\.(s?c|sa)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        
          loader: 'sass-loader',
          options: 
            implementation: sass,
            sassOptions: 
              fiber: fibers,
            ,
            prependData: `@import "~/styles/main.scss"`,
          ,
        ,
      ],
    
    ...
    ]
  
  ...

或者对于 sass-loader

            options: 
              implementation: sass,
              fiber: fibers,
              data: `@import "~/styles/main.scss"`,
            ,

【讨论】：

谢谢！您的评论为我节省了大量时间！