@import无法跳过未使用代码，因其是文本粘贴而非模块加载，会无条件导入整个文件内容；@use则通过声明式引用和符号绑定，仅编译实际调用的部分，并支持单次解析、缓存复用与精确导出。
@import 会无条件拼接整个文件内容，哪怕只用了一个变量，也会把所有规则、mixin、嵌套样式全塞进来——重复导入同一文件，就等于重复编译、重复输出 CSS。
为什么 @import 无法跳过未使用的代码
@import 不是“加载模块”，而是“文本粘贴”。Sass 编译器遇到 @import "mixins"，不管当前文件有没有调用 @include clearfix，都会把 _mixins.scss 里全部内容（包括 .sr-only、.visually-hidden、@mixin transition-all）原样插入。结果就是：你只用了 flex 工具，却打包了整套重置 + 排版 + 动画规则。
- 常见错误现象：
@import "utils"在_card.scss、_modal.scss、_form.scss中各出现一次 → 最终 CSS 里.clearfix被生成三次 - 路径错误也不报错：
@import "vars"实际应为@import "_vars"，但 Sass 静默忽略 → 变量失效，开发者误以为要再加一遍@import，进一步加剧重复 - 没有“已加载”状态跟踪：即使
main.scss已@import "base"，其子组件仍可再次@import "base"，编译器照单全收
@use 怎么真正避免重复打包
@use 是声明式引用，不执行、不输出，只建立符号绑定。只有当你显式访问 utils.$spacing-sm 或调用 utils.text-truncate() 时，对应部分才参与编译；其余未引用的 mixin、选择器、变量全被跳过。
- 同一模块被
@use十次，Sass 内部只解析一次，缓存复用 —— 构建速度明显快于反复@import - 搭配
@forward ... show可精确导出子集，比如@forward "mixins" show flex-center, grid-gap，下游连clearfix的名字都看不到 - 旧项目迁移时，若直接把
@import "reset"换成@use "reset"，但没删掉原_reset.scss里的.reset-body { ... }规则，它依然会输出 —— 此时得改用%reset-body占位符或抽离为私有_reset-internal.scss
构建工具链不升级，@use 也白搭
Angular CLI 17+、Vite 5+ 默认启用 Dart Sass 2.x，但老项目若还在用 node-sass 或未更新 sass-loader，@use 会直接报错 Invalid CSS after "@use"，根本进不了编译环节。
- 检查命令：
npx sass --version必须输出Dart Sass 2.x，而非1.x或Node Sass - Webpack 用户需确认
sass-loader版本 ≥ 14.0.0，并在options中关闭implementation: require('sass')的旧写法 - Vue CLI 项目要升级到 5.0.8+，否则
@use在<style lang="scss"></style>里会被 loader 忽略
最常被忽略的一点：@use 的路径必须不含扩展名和下划线，@use "src/styles/_variables.scss" 和 @use "src/styles/variables" 是两回事 —— 前者报错，后者才有效。路径写错不会提示“找不到”，而是静默失败，变量访问直接报 Undefined variable，排查起来反而更费时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
