问在Vue 3中使用Scss变量重写Vue 3和Vue CLI使用Vue 3 Beta

EN

我正在使用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目录中的变量，它看起来像是我需要重写的变量(当我将使用自定义字体时，现在草书应该确保使用不同的En应当字体来验证它是否有效)。

这不起作用，我尝试将目录更改为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文件添加到插件dir中，其内容如下：

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

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

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

​

在这一点上，我一直在网上搜索，却找不到任何有用的东西：

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

下面是使用我当前代码的git：https://github.com/dragonman117/Vuetify-Theme-Test