删掉一行@import就能修复变量访问失败，因为Sass编译器对@import零容忍：只要存在任意@import，整个文件及所有依赖链立即降级为legacy模式，@use全部失效、命名空间消失、v.$color-text报Undefined variable；全局搜索@import（含第三方库和构建配置）、确认Dart Sass≥1.23.0、入口文件仅用@use且分量文件不输出CSS，方可恢复模块化行为。
@use 和 @import 混用不是警告，是编译器强制降级：只要存在任意一处 @import，整个文件及其所有依赖链立刻退化为 legacy 模式，@use 全部失效、命名空间消失、变量报 Undefined variable。
为什么删掉一行 @import 就能修复变量访问失败
Sass 编译器对 @import 是零容忍的——它不区分“主文件”或“被导入文件”。哪怕只在 _button.scss 里写了一行 @import "reset"，而 index.scss 只写 @use "_button"，整个依赖链都会崩坏：
-
@use "vars" as v在index.scss里写了也白写，v.$color-text必报错 - 所有被
@import进来的样式会 inline 到当前文件末尾，完全脱离你写的@use顺序 - Webpack 的
style-loader把这部分 legacy 样式当作独立模块注入，<style>标签位置不可控
如何定位并清理所有 @import 残留
别只搜你写的主文件。混用问题藏在“被导入的文件”里，而不是“写 @use 的文件”里：
- 全局搜索项目中所有
@import（含单引号、双引号、无引号、带.scss后缀、带下划线前缀） - 重点检查：
node_modules中未升级的第三方库（如bootstrap@5.2）、vite.config.ts或vue.config.js里的sassOptions.additionalData是否偷偷注入了@import - 用命令行验证：
sass --trace src/styles/main.scss可定位到具体哪一行被判定为“非空白前置内容” - 确认
sass --version是 Dart Sass ≥ 1.23.0；LibSass 已废弃，不支持@use，会直接报错而非警告
@use 正确组织样式的最小可行结构
真正控制 CSS 输出顺序和变量可见性的，不是导入语句本身，而是“哪些规则最终落在顶层入口文件里”：
- 入口文件（如
index.scss）只写@use，不写任何@import，也不直接写选择器 - 分量文件（如
_button.scss、_card.scss）以_开头，只导出@mixin或占位符（%base），不输出任何 CSS 规则 - 在
index.scss中按需@include button-styles()或@extend %base，顺序由你手写决定 - 纯 CSS 文件（如
normalize.css）不要@import，改用<link rel="stylesheet">或 Webpack 的asset/inline加载
最容易被忽略的一点：第三方库若仍用 @import（比如 Bootstrap < 5.3），你无法靠 @forward 包装它——得等库升级，或自己 fork 后手动改写。漏掉一个 @import，整个模块边界就塌了，而且不会报错，只会静默失效。
