@use不能直接引入.css文件，必须通过下划线开头的包装文件（如_normalize-wrapper.scss）用CSS原生@import引入，再以@use调用该包装文件。
@use不能引入.css文件，这是最直接的限制
你写 @use "reset.css" 会立刻报错 Invalid CSS after ""——@use 只认 .scss 或 .sass 文件，且必须是下划线开头的 partial（如 _reset.scss）。它不处理原生 CSS 加载逻辑，也不生成 @import url()。
常见错误现象：
- 把
@import "normalize.css"直接改成@use "normalize.css"→ 编译失败 - 新建了
normalize.scss（没下划线）→@use "normalize"报No module with the name "normalize" - 路径写了
@use "css/variables"，但实际文件是css/_variables.scss→ 找不到模块
@import url() 是运行时加载，@use 是编译时解析
@import url("base.css") 或 @import "base.css" 会被 Sass 原样透传到最终 CSS 中，浏览器在渲染时才发起 HTTP 请求。它绕过整个构建流程：PostCSS 不处理、变量不可用、热更新中断、source map 失效。
而 @use 引入的文件，在编译阶段就被完整解析、AST 构建、符号表注册，所有变量、mixin、函数都纳入模块系统管理。哪怕只改一个 $color，也只重编译该模块及其依赖链，不是全量重刷。
立即学习“前端免费学习笔记（深入）”；
关键区别点：
-
@import url("xxx.css")出现在任意 Sass 文件中 → 整个文件降级为 legacy 模式，@use全部失效 - Webpack/Vite 的
additionalData里注入@import→ 每个组件都触发一次独立解析，缓存归零 - 哪怕只有一处
@import url()，后续所有$variable都无法拼接路径（如url(#{$icon-path}/home.svg)）
纯 CSS 必须包装才能进 @use 流程
想让 normalize.css 或 reset.css 被 @use 管理，唯一合规做法是新建一个 wrapper 文件，比如 _normalize-wrapper.scss，内容仅一行：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
@import "node_modules/normalize.css/normalize.css";
注意：这个文件必须满足三个条件：
- 文件名以下划线开头（
_normalize-wrapper.scss） - 内容是标准 CSS
@import语法，不能含任何 Sass 语法（如$var、@mixin、@use） - 主文件中写
@use "normalize-wrapper"（不带扩展名，不加.scss）
这样生成的 CSS 里仍是 @import url(...)，但它已被纳入构建上下文：热更新生效、source map 可定位、PostCSS 插件能作用于其后的规则。
第三方库是否支持 @use，得看它有没有重构为 partial 结构
Bootstrap 5.2 及更早版本内部仍大量使用 @import，你 @use "bootstrap/scss/functions" 会因它自身调用了 @import "_variables" 而拖垮整个模块系统——编译器检测到任意 @import 就强制退化为全局模式。
真正能安全 @use 的库需满足：
- 所有文件都是
_xxx.scss形式 - 没有
@import url()或@import "xxx.css" - 对外暴露的成员（变量/mixin/函数）全部通过
@forward显式导出，而非靠@import合并
目前只有 Bootstrap 5.3+、Sass 的内置模块（sass:math、sass:color）等少数库完成适配。其他库要么等升级，要么自己手动封装 wrapper。
最容易被忽略的是路径精度和命名空间绑定——@use 不猜、不补、不 fallback，错一个字符、少一个点、多一个空格，就等于没引入。
