@import 在大型项目中拖慢编译且难以维护，因其全局合并、无作用域隔离、不支持按需加载；而 @use 提供命名空间、显式依赖和模块化组织，需 Dart Sass ≥1.23.0。
为什么 @import 在大型项目里会拖慢编译且难以维护
Sass 的 @import 是全局合并行为：每次引入都把整个文件内容复制进当前作用域，变量、mixin、函数全暴露，容易冲突；更关键的是，它不支持按需加载——哪怕只用了一个颜色变量，也得把整套 _reset.scss 或 _typography.scss 编译进来。大型项目里几十个 @import 嵌套后，不仅编译时间翻倍，连 source map 都对不上行号。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有旧项目迁移时，先检查是否有重复定义的
$primary-color或同名@mixin clearfix，这类冲突在@use下会直接报错，反而是好事 -
@import无法限制作用域，而@use默认只暴露带前缀的成员（比如color.$primary），避免命名污染 - 别指望
@use兼容老版本 Sass：必须用 Dart Sass ≥1.23.0，Node Sass 已废弃，不支持
如何用 @use 正确组织基础模块（颜色、工具、重置）
核心原则是“一个文件一个职责”，且每个模块只通过 @use 显式暴露需要的内容。比如颜色模块不该包含字体大小断点，工具函数也不该偷偷 @import 重置样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
_colors.scss写成纯变量集合，结尾加@export（可选），调用方写@use 'colors' as color，之后用color.$primary - 工具类 mixin（如
respond-to）单独放_mixins.scss，@use 'mixins' as m，调用@include m.respond-to(md) - 重置或基础样式（
_base.scss）仍可用@use，但要确保它不依赖其他模块——否则会形成循环@use - 路径别写相对 ../：统一用
@use 'src/styles/colors'，靠 Sass 的load-path或includePaths配置解决
@use 后如何跨模块共享变量和函数（比如让 _buttons.scss 读取 colors.$primary）
不能靠“就近 @use”就完事。如果 _buttons.scss 自己 @use 'colors'，那它用的是自己作用域里的 colors；但如果主入口文件（main.scss）已经 @use 'colors' as color，按钮文件并不会自动继承这个别名。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 组件文件（如
_buttons.scss）必须独立@use所需模块，别假设父文件已引入——Sass 没有作用域继承 - 想复用同一套配置？把公共变量抽到
_config.scss，所有模块都@use 'config'，而不是传参数或靠全局变量 - 避免在
_buttons.scss里写@use 'colors' as c然后又在_forms.scss里写@use 'colors' as color——别名不一致会导致维护困难，统一用as color - 函数/混合宏跨模块调用没问题，但注意：被
@use的文件若含 CSS 输出（比如body { margin: 0 }），会被重复注入——所以基础样式文件应只含@function/@mixin/$var，不含实际 CSS
构建时发现 CSS 丢失或变量未定义？重点查这三处
不是语法写错了，而是 @use 的加载逻辑和旧习惯冲突。最常见的是“明明写了 @use，却提示 Undefined variable "$primary"”，或者生成的 CSS 少了一半规则。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认文件扩展名是
.scss（不是.sass），且没有遗漏下划线：@use 'colors'对应的是_colors.scss，不是colors.scss - 检查是否误把
@use写在嵌套规则里（如.card { @use 'mixins' }）——@use只能出现在顶层，否则直接报错 - Webpack / Vite 中若用
sass-resources-loader或全局注入，会和@use冲突：删掉那些 loader，改用@use显式管理依赖 - VS Code 插件（如 Live Sass Compiler）可能仍默认用 Node Sass，需手动指定 Dart Sass 路径，否则编辑器提示和实际构建结果不一致
模块拆分不是为了多建几个文件夹，而是让每个 @use 调用都可预测、可审计、可替换。一旦开始用 @use，就别再混用 @import——它们不在一个作用域模型里，强行共存只会让问题更难定位。
