@use 不能直接引入 CSS 文件，因其仅支持解析 .scss/.sass 模块；需用 _wrapper.scss 包装，内含 @import "xxx.css"，再通过 @use 引入。
@use 不能直接引入外部 CSS 文件，必须包装成 Sass 模块才能用；原生 CSS 的 @import 会触发运行时请求，不推荐。
为什么 @use "xxx.css" 会报错
Sass 解析器在模块加载阶段就拒绝非 Sass 语法——比如 @use "normalize.css" 会直接报 Invalid CSS after "": expected 1 selector or at-rule, was "/*"。这不是路径问题，而是语法层级冲突：@use 只认 .scss 或 .sass 模块，且要求文件能被当作有效模块解析（有明确作用域、可导出内容）。
常见错误现象：
- 编译中断，提示 “@import rules are not allowed in modules”
- 即使路径正确，
@use "node_modules/xxx/xxx.css"依然失败 - 误以为配置
loadPaths能解决 CSS 导入——它只影响 Sass 源文件查找，对.css完全无效
正确做法：用 _wrapper.scss 包装 CSS 文件
本质是把外部 CSS “翻译”成一个合法的 Sass 模块，再通过 @forward 暴露给 @use。这个包装层必须满足三个条件：
立即学习“前端免费学习笔记（深入）”；
- 文件名以
_开头（如_normalize-wrapper.scss），否则会被当作入口文件报错 - 内容仅含一行
@import "path/to/normalize.css";（注意：这是 CSS 规范的@import，Sass 会原样输出为@import url(...)） - 不能包含任何变量、
@use、@mixin等 Sass 逻辑，否则破坏“纯 CSS 包装”语义
示例：
// _normalize-wrapper.scss @import "node_modules/normalize.css/normalize.css";
然后在主文件中使用：
@use "normalize-wrapper" as *;
想覆盖外部 CSS 样式？顺序和作用域是关键
CSS 层叠规则照常生效，但 Sass 编译后顺序决定最终优先级。你无法在包装文件里直接改 normalize.css 的样式——它只是被原样注入。覆盖必须发生在它之后、且选择器权重足够：
-
@use的模块默认不污染全局，所以@use "normalize-wrapper" as *;后的自定义样式需写在它之后 - 不要在
_normalize-wrapper.scss里加任何重写规则，否则可能被忽略或引发解析失败 - 更稳妥的覆盖方式：用
@layer显式控制层叠顺序（Dart Sass 1.33+ 支持）
例如：
@use "normalize-wrapper" as *;
@layer base {
html { font-size: 16px; }
}
@layer components {
.btn { padding: 8px 16px; }
}
替代方案：构建工具处理比 Sass 更合适
如果你只是想把外部 CSS（如 Tailwind、Bootstrap CSS 版）注入最终产物，Sass 不是最佳载体。现代构建链路更推荐：
- Vite：在
vite.config.ts中用assetsInclude或插件直接 import.css - Webpack：用
style-loader+css-loader处理import 'xxx.css' - PostCSS：配合
postcss-import插件，在 CSS 层做@import，避免 Sass 解析干扰
这些方式不经过 Sass 解析器，不会报错，也更容易调试加载顺序和 source map。
真正容易被忽略的一点：很多人试图让 Sass “接管”外部 CSS 的变量或 mixin，但除非该库提供 .scss 源码（如 Bootstrap 的 scss/ 目录），否则你根本拿不到那些能力——包装 .css 文件只能拿到样式规则，拿不到 Sass 逻辑。
