SCSS的@import是编译时文件合并指令，CSS原生@import是运行时HTTP请求；后缀为.css时Sass直接降级输出或报错，不解析变量/mixin，必须用.scss后缀并由Sass编译器处理。
SCSS的@import不是CSS的@import
SCSS的@import是构建时的文件合并指令，而CSS原生的@import是运行时的HTTP请求规则。两者语义完全不同，但名字一样，容易混淆。当你写@import "reset.css"，Sass编译器一看后缀是.css，就放弃编译处理，直接原样输出为@import url("reset.css");——它没报错，也没警告，只是默默交棒给浏览器去加载。
@import "xxx.css"为什么变量和mixin都用不了
因为那行@import根本没进Sass编译流程。所有$variable、@mixin、@function都只在.scss或.sass文件被sass-loader（或Dart Sass CLI）读取时才生效。一旦路径带.css后缀，Sass就当它是“外部资源”，不解析内容、不展开逻辑、不继承作用域。
- 你在
variables.css里写$primary: #007bff;→ 编译后原样保留，变成无效CSS语法，或被浏览器忽略 - 你在
mixins.css里写@mixin flex-center { ... }→ 浏览器看到就报错，因为原生CSS根本不认识@mixin - 即使你把文件重命名为
variables.scss，但还在一个.css文件里@import "variables.scss"→ 同样无效，因为那个.css文件压根没被Sass编译器处理
如何让CSS内容真正参与Sass编译
唯一可靠方式：确保目标文件是.scss（或.sass），且被Sass编译器主动读取。不是改写法，而是改路径和后缀。
- 把
reset.css重命名为_reset.scss（加下划线表示partial），然后写@import "reset"（不带后缀、不带下划线） - 如果必须保留
.css后缀（比如第三方库），就别走Sass的@import，改用JS侧导入：import "@/styles/external.css"，靠css-loader处理 - 注意：JS导入的CSS不会获得变量/mixin能力，它只是把样式注入DOM，和Sass逻辑完全隔离
- Webpack/Vite中，
.css文件能否被正确处理，取决于loader配置顺序；若sass-loader在css-loader之前，@import "xxx.css"仍会被Sass拦截并降级为原生@import
为什么Dart Sass 5.0+连降级都不做了
旧版Sass对.css文件还做一次“降级兼容”：自动转成@import url(...)。但Dart Sass 5.0+已彻底移除该行为，遇到@import "xxx.css"会直接报错No module with the name "xxx.css"——它不再假装能处理，而是明确告诉你：“这不是我管的”。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：你写的每一行@import，都在决定哪段代码进编译流程、哪段交给浏览器。混用两种@import，等于把构建时逻辑和运行时加载搅在一起，调试时变量突然消失、样式加载延迟、热更新失效，根源往往就在这里。
