变量未生效主因是 sass 混用 @import 与 @use 导致降级为 legacy 模式，使 @use 失效；应统一用 @use 并避免任何 @import，通过 additionaldata 注入带下划线的变量文件，启用命名空间访问。
变量没生效，大概率不是路径写错，而是 Sass 模块系统被意外降级或覆盖了。
为什么 $color-primary 在组件里报 “Undefined variable”
常见错误现象是：变量文件明明存在、路径也对，但编译时仍提示未定义。这不是 Nuxt 3 的 bug，而是 Sass 编译器在混合使用 @import 和 @use 时自动降级为 legacy 模式，导致所有 @use 失效、命名空间丢失、变量无法跨文件访问。
- 全局搜索项目中所有
@import（包括node_modules里的第三方库，如旧版 Bootstrap 或某些 UI 库的 SCSS 入口） - 只要任意一个
.scss文件里出现@import，整份文件就进 legacy 模式，@use "vars" as theme直接被忽略 - 典型表现：删掉某行
@import 'reset'，theme.$primary突然就能用了 - 检查你用的 UI 库是否已升级到支持
@use的版本（例如 Bootstrap ≥ 5.3、Ant Design Vue ≥ 4.0）
如何让 assets/variables.scss 真正全局可用
Nuxt 3 推荐用 vite.css.preprocessorOptions.scss.additionalData 注入，但它只是“每份 SCSS 文件开头加一行 @import”，本质仍是 @import 模式，有污染风险。更稳妥的做法是分两层控制：
- 把自定义变量抽成
assets/_variables.scss（注意下划线前缀），只放带!default的声明，例如：$color-primary: #007bff !default; - 在
nuxt.config.ts中配置：vite: { css: { preprocessorOptions: { scss: { additionalData: '@use "@/assets/_variables" as *;' } } } } - 关键点：
@use "@/assets/_variables" as *;中的_variables必须带下划线，不能写variables.scss或variables - 禁用所有其他地方的
@import，尤其避免在app.vue或组件<style lang="scss"></style>里再手动@import
为什么改用 @use 后变量名突然不识别了
这是模块化带来的必然变化：@use 默认启用命名空间，不再“裸奔”。你不能再直接写 $primary-color，而必须通过命名空间访问。
- 错误写法：
@use "@/assets/_variables"; .btn { color: $primary-color; }→ 报错 - 正确写法（推荐）：
@use "@/assets/_variables" as vars; .btn { color: vars.$primary-color; } - 若坚持无前缀，只能用
as *，但需确保：该文件没混用@import；且没有多个as *导致同名变量覆盖 - 第三方库（如 Bulma）建议改用对象写法显式指定语言：
{ src: 'bulma/scss/bulma.scss', lang: 'scss' }，避免sass-loader@11+兼容问题
调试时怎么快速确认哪个文件最终赢了变量赋值
别靠猜，用 @debug 直接看编译输出：
- 在你怀疑被覆盖的变量文件末尾加一行：
@debug $color-primary; - 运行
nuxi dev，终端会打印出该变量最终的值和它所在的文件路径 - 如果输出的是 UI 库里的值（比如
#1890ff），说明它的@import或@use出现在你之后 - 配合全局搜索
$color-primary:（注意冒号），重点盯node_modules下的_variables.scss和构建配置里的additionalData
真正容易被忽略的点是：你以为变量失效了，其实它早就被注入了，只是 CSS 层级没赢——比如你在 .btn 里设了 color: $color-primary，但页面上还是灰色，大概率是某条 .btn.is-disabled { color: #ccc !important; } 压过了它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
