在 Vue 3 中使用 Scss 变量覆盖和 Vuetify 3 Beta 使用 Vue CLI

Question

我正在使用 Vue 3、Vuetify 3.0.0（beta 0）和最新的 Vue-CLI 开发一个项目。我正在尝试自定义 vuetify 字体，但是我在网上找到的所有覆盖 vue sass 变量的方法都不起作用。

我所做的第一次尝试是使用 vuetify 网站上的 Vuetify 文档：https ://next.vuetifyjs.com/en/features/sass-variables/

使用默认项目，我按照指示添加了styles目录和文件。variables.scss文件内variables.scss有以下内容：

$body-font-family: cursive;

挖掘 Vuetify lib 目录中的变量看起来我需要覆盖这个变量（虽然我将使用自定义字体，但现在草书应该确保使用不同的足够的字体来验证它的工作原理）。

这不起作用，我尝试将目录更改为scss并得到相同的结果（它不导入）请参阅下面的结果图像。

因此，我的第二次尝试是按照文档找到文件，vue.config.js其中它指向https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader#customising-variables。这导致我将vue.config.js文件更改为如下所示：

const { defineConfig } = require("@vue/cli-service");
const { VuetifyLoaderPlugin } = require("vuetify-loader");

module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: {
    plugins: [new VuetifyLoaderPlugin({ styles: "expose" })],
  },

  pluginOptions: {
    vuetify: {
      // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
    },
  },
});

将 main.scss 文件添加到插件目录中，其中包含以下内容：

// main.scss
$font: cursive !important;

@use 'vuetify/styles' with (
  $color-pack: false,
  $utilities: false,
  $body-font-family: $font
);

这基本上删除了页面中的所有格式，但没有将文本更改为草书字体（见下图）

此时我一直在网上搜索，但找不到任何有效的方法：

• 初步研究引导我更改 vuetify 中的默认字体，这是我获得前两种方法的地方，我对 sass 加载器也没有运气。
• 在 git repo https://github.com/vuetifyjs/vuetify-loader/issues/221似乎提出了类似的问题，但没有结果
• 如何使用 vue 3 覆盖 vuetify 3 组件 sass 变量提出了类似的问题，但缺乏深度

这是一个包含我当前代码的 git 存储库：https ://github.com/dragonman117/Vuetify-Theme-Test

Answer 1

我为此奋斗了整整两个小时，终于弄清楚了。偶然发现你的问题，我想我会给你一根骨头，即使是三个月后。

目前的问题是Vuetify 3 文档不是最新的。之后我将尝试更新 PR 中的文档。关键的缺失部分是 vuetify-loader 用于 Vuetify 2，但 Vuetify 3 使用新的wepback-plugin-vuetify。当我偶然发现vuetify-loader 的“下一个”分支时，我发现了这一点（请参阅自述文件）。

无论如何，这就是您使用 Vue CLI 安装时所需的全部内容。

vuetify.ts

import @/styles/variables.scss;
// the rest of your vuetify.ts file...

变量.scss

@use "vuetify/styles" with (
  $body-font-family: "Comic Sans"
);

编辑：另外，我刚刚开始遇到在“with”之后的列表中的字体系列中包含逗号的问题，所以我最终做了以下操作。这可能不是最好的 SASSy 解决方案，但我很了解它们的语法，足以想出其他的东西：

变量.scss

$body-font-family: Inter, sans-serif;

@use "vuetify/styles" with (
  $body-font-family: $body-font-family
);

希望这可以帮助。祝你好运。