@import已被Dart Sass官方标记为deprecated，2026年起主流构建工具默认启用严格警告，3.0.0版将彻底移除；因其编译期文本拼接机制导致全局污染、无模块边界，故必须迁移到@use/@forward。
@import 已被 Dart Sass 官方标记为 deprecated，2026 年起主流构建工具（Vite、Angular CLI、Webpack + sass-loader）默认启用严格警告，3.0.0 版本将彻底移除 —— 不是“建议弃用”，而是“必须迁移”。
为什么 @import 会触发编译警告甚至报错
@import 的问题不是风格偏好，而是机制缺陷：它在编译期做文本拼接，不建模块边界，导致变量/mixin/function 全局污染。Dart Sass 自 1.70 起对 @import 输出 DEPRECATION WARNING；升级到 1.85+ 后，若项目启用 --fatal-warnings（CI/CD 常见配置），直接中断构建。
- 常见错误现象：
Undefined variable "$color-primary"—— 实际是@import 'vars'成功了，但后续某个@import 'theme'覆盖了同名变量，调试时找不到源头 - 构建工具影响：Vite 的 HMR 对
@import文件变更响应极差，改一个_mixins.scss可能触发整站 CSS 重编译；Angular CLI 17+ 默认开启strictSassImports: true，@import直接报错 - 兼容性陷阱：Node Sass 已停止维护，而
@use仅由 Dart Sass 支持；如果你还在用node-sass，连语法都解析不了 —— 这不是警告，是硬性不支持
@use 必须加命名空间，不能直接写 $var
@use 默认创建隔离作用域，所有成员需通过命名空间访问，这是设计使然，不是 bug。例如 @use 'src/styles/variables' 后，$primary-color 必须写成 variables.$primary-color。
- 别名可简化：
@use 'src/styles/variables' as v→ 用v.$primary-color；@use 'src/styles/variables' as *可提升为全局（不推荐，退化为@import行为） - 文件名决定默认命名空间：
_buttons.scss→ 命名空间为buttons；_utils.index.scss→ 命名空间为utils_index（点号转下划线） - 容易踩的坑：迁移时漏改变量引用，比如旧代码
color: $text-color，新写法必须是color: variables.$text-color，否则报Undefined variable
@forward 不是 @use 的替代品，而是“导出管道”
@forward 本身不引入内容，只把当前文件中 @use 的模块“转发”出去，供上级文件间接使用。它解决的是“统一入口文件”的问题，比如设计系统里一个 _index.scss 汇总所有模块。
- 典型结构：
_index.scss中写@forward 'colors'; @forward 'typography';，然后其他文件@use 'index'就能访问index.$color-brand和index.$font-size-lg - 关键限制：
@forward不支持with参数，配置必须在原始@use处完成；也不能转发私有成员（以$-或$_开头的变量/mixin） - 常见误用：试图用
@forward 'mixins' as *;来绕过命名空间 —— 无效，@forward不改变作用域规则，仍需mixins.flex-center()
私有变量以 $- 或 $_ 开头，@use 下天然不可见
Sass 用命名约定实现封装：$-internal-spacing 或 $_config-map 在 @use 导入后，外部文件无法访问，连提示都没有，直接报 Undefined variable。
- 这是保护机制，不是 bug：避免下游意外依赖内部实现，提升模块稳定性
- 迁移雷区：老项目习惯把所有变量塞进
_vars.scss并以$-开头“假装私有”，但@import下它依然可用；换成@use后突然失效 —— 解法是删掉-，或显式@use 'vars' with ($-internal-spacing: 8px)（仅限@use处传参） - 注意路径写法：
@use '@/styles/vars' as v中的@/是 Vite/Angular 别名，实际解析依赖css.preprocessorOptions.scss.additionalData或stylePreprocessorOptions配置，别名未生效会导致File to import not found
最常被忽略的一点：命名空间不是“多打几个字”的负担，而是协作安全线。当你在组件库中看到 button.$border-radius，你立刻知道这个值来自按钮模块，而非全局主题 —— 这种确定性，在百人协同、千个 SCSS 文件的项目里，比少敲两个字符重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
