[plugin:vite:css] [sass] This variable was not declared with !default in the @used module.

Question

[plugin:vite:css] [sass] This variable was not declared with !default in the @used module.

Answer 1

晚上好🌙🌙🌙
本答案参考通义千问

这个错误信息：

[plugin:vite:css] [sass] This variable was not declared with !default in the @used module.

表示你在使用 Sass 时，引用了一个 未被声明的变量，并且该变量在 @use 的模块中没有使用 !default 声明。Sass 在 @use 模块中要求所有变量必须显式声明（或使用 !default）。

---

✅ 问题原因分析

1. 你可能在某个 Sass 文件中使用了变量，比如：

   $my-color: #000;
   

2. 然后在另一个文件中通过 @use 引入该变量，但该变量没有用 !default 声明，导致 Sass 报错。

3. Sass 的 @use 规则要求：如果一个变量要在 @use 模块中被外部访问，它必须以 !default 标记。

---

🛠️ 解决方案

1. 在变量定义时添加 !default

如果你希望该变量可以被其他文件通过 @use 引用，请在变量定义时加上 !default。

❌ 错误写法（报错）：

$my-color: #000;

✅ 正确写法：

$my-color: #000 !default;

---

2. 确保 @use 的模块路径正确

如果你在 @use 中引入的是一个模块（如 _variables.scss），请确保路径正确，并且该模块中的变量已经用 !default 声明。

示例结构：

src/
├── styles/
│   ├── _variables.scss
│   └── main.scss

_variables.scss：

$primary-color: #007bff !default;
$font-size: 16px !default;

main.scss：

@use 'styles/variables';

body {
  color: variables.$primary-color;
}

---

3. 使用 @import 替代 @use（不推荐）

虽然 @use 是 Sass 的新语法，但如果你使用的是旧版本 Sass 或项目中依赖 @import，可以暂时改用 @import，但这不是最佳实践。

❌ 不推荐：

@import 'variables';

---

🔧 修改后的代码示例

原始错误代码（假设在 _colors.scss 中）：

$primary: #007bff;

修改后（添加 !default）：

$primary: #007bff !default;

使用该变量的文件（如 main.scss）：

@use 'colors';

body {
  background-color: colors.$primary;
}

---

📌 总结

| 步骤 | 内容 | |------|------| | 1 | 在变量定义时添加 !default，例如：$color: #000 !default; | | 2 | 确保 @use 的路径正确，且模块中变量已声明 | | 3 | 如果使用旧版 Sass，可考虑使用 @import（不推荐） |

---

如有更多关于 Sass 变量、@use 和 @forward 的问题，欢迎继续提问！