@use 不能直接引入纯 css 文件，必须通过下划线开头的 sass 包装文件（如\_normalize-wrapper.scss）中转，因其仅解析 sass 语法，遇 css 开头即报 invalid css 错误。
@use 不能直接引入 CSS 文件，这是它和 @import 的根本区别——你必须用一个带下划线的 _wrapper.scss 文件做中转，否则编译直接报错。
为什么 @use "normalize.css" 会报 Invalid CSS 错误
@use 只解析 Sass 模块（.scss 或 .sass），遇到纯 CSS 开头（比如 /* 或 html {）就立刻拒绝。错误信息通常是：Invalid CSS after ""; expected 1 selector or at-rule, was "/*"。这不是路径问题，是语法层级不匹配。
- @import 是 CSS 层级指令，能原样输出
@import url("...")；@use 是 Sass 模块系统，只认 Sass 语法 - 哪怕文件名写对、路径写对、扩展名写对，只要内容是纯 CSS，
@use就不会加载 - Dart Sass 2.0+ 已完全移除
@import支持，所以你不能靠降级回退来绕过
正确做法：新建 _normalize-wrapper.scss 包一层
在项目里建一个本地 Sass 文件，名字必须以下划线开头（_xxx.scss），内容只有一行 @import，且不能混入任何变量、函数或其它 @use：
@import "node_modules/normalize.css/normalize.css";
- 这个
@import是 CSS 规范的@import，Sass 会把它原样透出为@import url(...)，不参与 Sass 编译逻辑 - 文件名必须是
_normalize-wrapper.scss，不能叫normalize-wrapper.scss（否则@use找不到模块） - 不能在该文件里写
$reset-font-size: 1rem这类声明，否则它就不再是“纯包装”，可能触发解析失败
主文件中怎么 @use 这个包装层
在你的入口 main.scss 或组件文件里，像引用普通 Sass 模块一样使用：
@use "normalize-wrapper" as *;
-
as *是为了保持和旧@import行为一致（全局注入），但仅限单个包装文件使用；多个as *会静默覆盖同名成员 - 如果想保留命名空间，写
@use "normalize-wrapper" as norm;，它不导出任何 Sass 成员，所以实际没差别 - 路径要能定位到
_normalize-wrapper.scss：比如它在src/scss/_normalize-wrapper.scss，而你在src/components/button.scss里写@use "../../scss/normalize-wrapper"
第三方库（如 Bootstrap）能不能直接 @use
只有明确标注支持 Dart Sass @use 的版本才行，比如 Bootstrap 5.3+。4.x 或更早版本不支持，@use "bootstrap/scss/functions" 会直接报错。
- 确认方式：查该库的
package.json是否声明"sass": "^1.80.0"或更高，且文档提到@use兼容 - 调用时必须加前缀：
bs.str-to-num("12px")，不能写str-to-num("12px") -
!default在@use下只生效一次，传参必须用with ($font-size-base: 16px)语法，且只能在首次@use时写
最易被忽略的一点：所有被 @use 的文件都必须是 _xxx.scss 形式，路径必须精确到文件系统真实位置，不补扩展名、不猜下划线、不搜子目录——哪怕只错一个 ./ 或多一个空格，No module with the name 就立刻出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
