VS Code中@use/@import路径跳转失效，主因是路径配置错误或别名未被编辑器识别：需检查tsconfig.json/jsconfig.json的paths、构建工具alias与Sass模块规则（如下划线命名、@use位置、命名空间访问）是否一致。
报错“Undefined variable”但变量文件明明存在
90% 这类问题不是变量没写，而是路径或顺序错了。VS Code 里点不了跳转的 @use 或 @import 路径，基本等于路径错误。
逐级检查：在报错文件（比如 components/_button.scss）里找到 @use 行，确认它指向的路径是否真实存在；注意相对起点——@use '../styles/variables' 在 src/scss/components/ 下，实际找的是 src/styles/variables.scss，不是 src/scss/styles/variables.scss。
若用了 ~@/ 别名，得确认构建工具（Vite / Vue CLI / uni-app）已配好映射；否则 Sass 直接按字面路径去找，~@/styles/variables.scss 就会失败。
-
@use必须写在文件最顶部，不能包在@media、@mixin或 CSS 规则里 - 被
@use的文件名必须以下划线开头（如_variables.scss），否则 Sass 拒绝识别为模块 - 路径要写全：
@use 'variables'等价于@use '_variables.scss'，但@use 'variables.scss'会失败
Vite 项目中 additionalData 配置了却仍报错
Vite 的 css.preprocessorOptions.scss.additionalData 确实能全局注入变量，但它只对 .vue 文件里的 生效，对纯 SCSS 文件（如 src/scss/utils.scss）不生效——这些文件仍需自己 @use。
更关键的是：additionalData 注入的代码执行得最早，如果它里面 @import 了一个变量文件，而你项目里又用 @use 引了同名变量，后者可能被跳过，导致你以为“已定义”的变量其实没加载进来。
- 检查
vite.config.ts中additionalData是否用了@import（应优先改用@use+as *） - 运行
grep -r "\$u-primary:" src/ node_modules/，确认是否node_modules/uview-ui里已提前定义了该变量 - 修改配置后务必重启开发服务器，Vite 不会热更新 preprocessor 配置
用了 @use 却还是访问不到变量
@use 默认不把变量注入当前作用域，必须通过命名空间访问。写了 @use '@/styles/_variables' as v，就得写 v.$primary-color，而不是直接 $primary-color。
常见手误包括：v.primary-color（漏掉 $）、@use 'variables' as * 后仍写 $primary-color（as * 只对函数和 mixin 有效，变量仍需显式导出）。
- 想让变量裸用，必须在源文件里加
@forward '_variables' as $*;，再@use该 forward 文件 - 避免混用
@import和@use：一旦文件里出现任意@import，整个文件都会降级为 legacy 模式，@use的作用域隔离失效 - 循环依赖（A
@useB，B 又@useA）时，Sass 静默跳过第二次引入，变量链就断了
在 :root 里用 SCSS 变量报错或无效
:root { --color: $primary-color; } 是无效写法——Sass 变量不能直接出现在 CSS 自定义属性值位置，浏览器会收到字面字符串 $primary-color，解析失败。
必须用插值语法：--color: #{$primary-color};。计算函数也一样：--bg-light: #{lighten($primary-color, 10%)}。
- 插值只支持基础类型（颜色、数字、字符串），map、null、function 会报
Invalid null value for `#{}` - 插值前建议加
@debug $primary-color;确认变量有值且类型合法 - 别指望 JS 运行时能动态改这个值——这是编译期展开，生成的是静态 CSS
真正容易被忽略的是：SCSS 变量的作用域完全由编译顺序决定，而不是你在编辑器里看到的“谁在上面”。哪怕 _variables.scss 放在项目最顶层目录，只要 vite.config.ts 的 additionalData 或 node_modules 里的某个主题文件先加载了同名变量，你的定义就永远进不了作用域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
