Question

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

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

我正在将一个较旧的项目从v1（手写笔）升级到v2（无礼），我需要覆盖一些变量，可以说我只需要将字体系列更改为Arial。

我也在通过vuetify进行树状握手。

现在，我有点卡住了，因为我不知道在哪里导入样式替代...在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>

Answer 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 <8.0.0

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

如何不使用Vue CLI覆盖Vuetify 2变量

1 个答案: