如何修复CSS在Sass中使用模块系统替代@import的最佳方案？

直接替换@import为@use必然失败，因@use是模块系统重构：变量/混入须加命名空间（如colors.$primary-color），文件须以下划线开头（_vars.scss），路径须精确匹配，纯CSS需包装，第三方库须已适配。

直接把 @import 换成 @use 必然失败，这不是语法替换问题，而是模块系统重构——必须同步处理命名空间、文件名规范、路径写法和第三方兼容性。

为什么所有变量和混入都报 “Undefined”？

因为 @use 默认不注入全局作用域，所有成员必须显式通过命名空间访问。你写 $primary-color，Sass 只查全局；但它实际在 colors.$primary-color 里。

1. 默认命名空间 = 文件名（不含 _ 和 .scss），例如 @use "src/vars" → 后续必须用 vars.$font-size-base
2. 可用 as 自定义前缀：@use "src/vars" as v → 调用 v.$spacing-md
3. as * 能解构导入，但仅限单个模块；多个 as * 会静默覆盖同名变量，且失去封装性
4. 旧代码中所有裸调用（如 @include clearfix）必须补上前缀：@include utils.clearfix

@use 总提示 “No module with the name” 怎么办？

@use 不猜路径、不补扩展名、不搜子目录，只认带下划线前缀的 partial 文件（如 _colors.scss），路径必须与文件系统严格一致。

1. 被导入文件必须以 _ 开头，@use "colors" 却只有 colors.scss → 报错；得改名为 _colors.scss
2. 相对路径从当前文件出发，不是项目根目录：@use "../theme/colors" 表示上一级再进 theme/colors.scss
3. 若文件是 src/scss/_colors.scss，你在 src/components/button.scss 里写 @use "colors" 会失败；得写 @use "../../scss/colors" 或配 --load-path=src/scss
4. 路径含空格或中文 → Dart Sass 直接拒绝解析

怎么引入 normalize.css、Bootstrap 这类第三方 CSS 或 Sass 库？

@use 不支持直引 .css 文件，也不兼容未适配的旧版 Sass 库（如 Bootstrap 4）。

1. 纯 CSS 文件（如 normalize.css）必须包装：_normalize-wrapper.scss 内容仅一行：@import "node_modules/normalize.css/normalize.css";，再 @use "normalize-wrapper"
2. Bootstrap 5.3+ 支持 @use，但路径和结构已变：@use "bootstrap/scss/functions" as bs → 调用 bs.str-to-num("12px")
3. Bootstrap 4.x 或未声明 @use 兼容的库，@use 会直接报错，无法迁移；只能保留 @import 并包裹进独立 partial，避免污染主模块
4. 第三方库若使用 !default 做配置回退，@use ... with ($var: value) 是唯一可控传参方式；多次 @use 不触发重新赋值

如何组织入口文件避免主样式堆满 @use？

@use 不支持逗号分隔多路径（@use "a", "b" 是语法错误），正确做法是下沉聚合逻辑到统一入口文件。

1. 在设计系统根目录建 _index.scss，里面逐行写：@forward "colors"; @forward "mixins"; @forward "breakpoints" show breakpoint-sm, breakpoint-lg;
2. 下游只需 @use "design-system/index" as ds，就能用 ds.$primary-color、ds.text-truncate()
3. @forward ... as prefix- 可批量加前缀，如 @forward "mixins" as util- → @include util-text-truncate
4. show/hide 精确控制暴露粒度，隐藏内部实现（如 $_internal-breakpoint 不会被转发）

最易被忽略的是：Dart Sass 是唯一支持 @use 和 @forward 的实现，Node Sass 已停更，Webpack + sass-loader 需 ≥12.0 + sass ≥1.33.0；路径别名若没透到 Sass 解析层（如 Vite 中未配 scss.additionalData），也会静默失败。