@use不能直接引入普通CSS文件，因为它只支持Sass模块（.scss/.sass），解析纯CSS会因语法不符报错；正确做法是新建\_xxx.scss包装文件用@import引入CSS，再@forward供@use使用。
为什么 @use 不能直接引入普通 CSS 文件
@use 是 Sass 模块系统的核心，它只认 Sass 模块（即 .scss 或 .sass 文件），且要求被加载的文件必须是有效的 Sass 模块——不能是纯 CSS，也不能缺少模块导出（比如没有 @forward 或 @include 可用内容）。直接写 @use "normalize.css" 会报错：Invalid CSS after "...": expected 1 selector or at-rule, was "/*..."。这是因为 Sass 解析器在模块阶段就拒绝了非 Sass 语法的开头。
引入外部 CSS 的正确路径：先转成 Sass 模块再 @use
本质不是“让 @use 支持 CSS”，而是把 CSS “包装”成一个合法的 Sass 模块。最稳妥的做法是新建一个本地 .scss 文件，用 @import（注意：这里是 CSS 层级的 @import，不是 Sass 的）或 @layer 引入 CSS 内容，再通过 @forward 暴露给其他模块：
// _normalize-wrapper.scss @import "node_modules/normalize.css/normalize.css";
然后在主文件中使用：
@use "normalize-wrapper" as *;
- 必须用
_normalize-wrapper.scss这种下划线前缀命名，否则会被当作可直接导入的入口文件而报错 -
@import "xxx.css"在这里属于 CSS 规范的@import，Sass 会原样输出为@import url("xxx.css")，前提是该语句出现在顶层且无其他 Sass 逻辑包裹 - 不要在
_normalize-wrapper.scss中写任何变量、混合宏或@use，否则它就不再是“纯 CSS 包装层”，可能触发解析失败
替代方案：用 @import（仅限兼容模式）或构建工具处理
如果你用的是 Dart Sass 1.33+，@import 已被标记为 deprecated，但尚未移除——它仍能导入 CSS 文件，例如：
@import "node_modules/normalize.css/normalize.css";
但这只是过渡手段，不推荐长期使用。更现代的做法是交给构建工具：
- Vite：在
vite.config.js中配置css.preprocessorOptions.sass.additionalData，或直接在.css文件里用@import，由 Vite 自动合并 - Webpack + sass-loader：CSS 文件可通过
style-loader+css-loader单独引入，无需塞进 Sass 流程 - 如果项目已启用
css模块化（如module.css），干脆把第三方 CSS 提取到 HTML 的中，避免 Sass 编译时介入
容易被忽略的细节：路径解析和作用域污染
即使包装成功，也要注意两个隐形陷阱：
-
@use默认创建私有命名空间，但as *会把所有成员提升到全局作用域——如果多个 wrapper 都用了as *，CSS 规则会叠加重复，且无法控制加载顺序 - 相对路径在
@use中以当前文件为基准，而@import "xxx.css"在 wrapper 文件里时，路径却是相对于 wrapper 文件位置的，不是主文件——容易因移动文件导致 404 - Sass 不会对引入的 CSS 做任何处理（如自动添加前缀、压缩），autoprefixer 等必须放在 PostCSS 阶段，不能指望
@use带来额外能力
真正麻烦的从来不是语法怎么写，而是搞清哪部分该由 Sass 负责、哪部分该甩给构建链路或浏览器原生机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
