@import在sass和原生css中本质不同：@import "xxx"由sass编译时内联处理，而@import url("xxx.css")或@import "xxx.css"被直接透传为浏览器运行时加载，绕过整个构建流程，导致postcss失效、变量不可用、热更新中断。
@import 在 Sass 和原生 CSS 中根本不是同一个东西，混用必然出问题——你写的那行 @import 到底是让 Sass 编译器处理，还是留给浏览器运行时加载，全看后缀、写法和上下文。
区分 @import "xxx" 和 @import url("xxx.css")
这是最常踩的坑：看起来都是 @import，行为天差地别。
-
@import "normalize"：Sass 尝试找normalize.scss或normalize.sass；找不到就报错File to import not found -
@import "normalize.css"：Sass 直接透传为@import url("normalize.css");，不编译、不解析、不走 PostCSS，纯运行时加载 -
@import url("reset.css")：同上，原样输出，$variable不能拼路径，autoprefixer对它后面的规则失效 - 哪怕只有一处
@import url()，整个文件就退出 Sass 编译流，变量、mixin 全部不可用
为什么 @use 不能直接替代 @import "xxx.css"
@use 的设计目标是模块化，不是加载资源——它只认 .scss / .sass 文件，且要求是合法 partial（以下划线开头）。直接 @use "normalize.css" 必报 Invalid CSS after ""。
- 正确做法是新建一个包装文件，比如
_normalize-wrapper.scss，内容只有这一行：@import "node_modules/normalize.css/normalize.css"; - 该文件必须顶层无缩进、无 Sass 语法（不能有
$var、@mixin、@use） - 然后在主文件中
@use "_normalize-wrapper"，路径要对，扩展名不能写.scss - 最终生成的 CSS 里仍是
@import url(...)，但至少它被纳入构建流程，热更新、source map 可用
混用 @import 和 @use 会彻底破坏模块系统
Sass 编译器一旦检测到任意 @import（无论是否带 .css 后缀），整份文件立即降级为 legacy 模式：所有 @use 失效、命名空间消失、变量变全局、CSS 输出顺序失控。
- 典型现象：
@use "vars" as v后写v.$color报Undefined variable，但删掉同一文件里某处@import "reset"就立刻正常 - 第三方库（如 Bootstrap 5.2）若内部仍用
@import，被你@use引入时也会拖垮整个依赖链 - Webpack/Vite 配置中通过
sassOptions.additionalData注入的@import同样算数，必须清理 - 验证方式：用
sass --version确保是 Dart Sass ≥ 1.23.0；再全局搜索项目中所有@import（含单引号、双引号、空格变体）
真正麻烦的不是报错，而是静默失效——你以为用了 @use，结果变量还在全局污染，样式顺序由构建工具随机决定，连 source map 都指向错误位置。路径、后缀、上下文，三者缺一不可控，就等于没控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
