Vuetify：覆盖特定于组件的 SASS 变量时出错

Question

我遵循有关如何覆盖 Vuetify SASS 变量的官方指南（链接），其中显示：

\n

\n

在 src/styles 目录中创建 main.scss 文件并更新 vuetify.js 文件中的\n样式导入：

\n

\n

src/样式/main.scss

\n

@use \'vuetify\' with (\n  $app-bar-background: \'red\';\n);\n

\n

src/plugins/vuetify.ts

\n

import \'@/styles/main.scss\'\n

\n

但是，我在应用程序启动时收到此错误消息：

\n

[sass] This variable was not declared with !default in the @used module.\n  \xe2\x95\xb7\n2 \xe2\x94\x82     $app-bar-background: \'red\'\n  \xe2\x94\x82     ^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src/styles/main.scss 2:5  root stylesheet\n10:58:31 AM [vite] Internal server error: [sass] This variable was not declared with !default in the @used module.\n  \xe2\x95\xb7\n2 \xe2\x94\x82     $app-bar-background: \'red\'\n  \xe2\x94\x82     ^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src/styles/main.scss 2:5  root stylesheet\n  Plugin: vite:css\n

\n

我究竟做错了什么？

\n

Answer 1

是的，这有点令人困惑。据我了解，问题来自导入顺序，它只影响组件变量。该文档有一个关于它的部分。

要修复它，您必须通过 vuetify-loader Vite 插件加载样式（我想这与 Webpack 相同）。文档有点稀疏，我会在每个步骤上添加一个词：

1. 使用以下命令创建具有特定于组件的覆盖的文件vuetify/settings：

// vuetify-settings.scss
@use 'vuetify/settings' with (
  $app-bar-background: 'red',
);

2. 在 Vite 配置中，使用 vuetify-loader 插件注册文件styles.configFile：

// vite.config.js
plugins: [
  vue(),
  vuetify({
    styles: {
      configFile: './src/vuetify-settings.scss'
    }
  }),
]

3. 切换回常规样式导入：

// plugins/vuetify.js
import 'vuetify/styles' // <----
import { createVuetify } from 'vuetify'

export default createVuetify()

现在加载器将编译 CSS 文件并将其注入到构建中。

这是在沙箱中