sass 的“按需引入”本质是人工控制 @use/@import 语句、规范文件命名与目录结构，并配合构建工具约束，而非语言支持运行时加载；@use 提供命名空间隔离和显式依赖，但仍属编译期行为，无法实现真正懒加载。
如何在 Sass 中实现真正的“按需引入”
Sass 本身没有运行时，所有 @import 都在编译期解析并内联，所谓“按需引入”其实是开发者控制哪些文件被 @import 进主入口。真正的按需，靠的是目录结构 + 命名约定 + 构建工具配合。
- 把公共变量、函数、混入放在
_variables.scss、_mixins.scss等带下划线前缀的文件中，它们不会被单独编译 - 主样式入口（如
main.scss）只@import明确需要的部分，比如只引入表单相关模块：@import "components/_form"; - 避免在
_mixins.scss里@import其他含样式的文件——这会悄悄把整块 CSS 注入进来，破坏“按需” - Webpack 或 Vite 的 Sass 加载器不改变这一行为；它们只是把 Sass 编译结果交给 CSS 处理流程，无法拦截或延迟
@import
Sass 的 @use 能替代 @import 实现更安全的按需吗
能，而且更推荐。但要注意：@use 不是“懒加载”，它仍是在编译期执行，只是提供了命名空间隔离和显式依赖声明。
-
@use强制要求所有成员（变量、函数、混入）必须通过命名空间访问，比如color.lighten($c, 10%)，避免全局污染 - 同一文件多次
@use同一个模块，Sass 保证只解析一次，比@import更可靠 - 不能用
@use加载纯 CSS 文件（如@use "normalize.css"会报错），只能用于 Sass 源文件 - 如果旧项目大量用了
@import，迁移到@use时注意：混合宏（@mixin）必须先@use再@include，不能再跨文件隐式调用
为什么你加了 async 或 defer 也没法让 Sass “异步加载”
因为 Sass 不是 JavaScript。它没有加载、执行、挂起的概念。所谓“异步加载 CSS”，实际是 HTML 层面用 <link rel="stylesheet" media="print" onload="this.media='all'"> 或 JS 动态插入 <link>，和 Sass 编译完全无关。
- 所有 Sass 文件都在构建阶段被打包成一个或多个 CSS 文件，输出后就和 Sass 无关了
- 如果你希望某块样式只在特定路由/组件出现时加载，得靠前端框架能力：React 的
lazy+useEffect插入<link>，或 Vue 的异步组件自动提取 CSS - 直接在 Sass 里写
@import url(...)是无效语法，Sass 不支持动态 URL 导入
构建工具里最容易被忽略的“按需”陷阱
很多人以为开了 Webpack 的 css-minimizer-webpack-plugin 或启用 treeShaking: true 就能删掉未用样式，但 Sass 层面根本没做静态分析，CSS 压缩器也无法识别“这个 @mixin 没被调用”。
立即学习“前端免费学习笔记（深入）”；
-
@import "utils/*"这种通配写法会把整个目录全塞进来，哪怕只用了一个_zindex.scss - 使用 Dart Sass 的
--load-path时，如果路径太宽泛（比如指向node_modules根），可能意外引入第三方库的全部样式 - Vite 的
css.preprocessorOptions.sass.additionalData会全局注入代码，相当于给每个 Sass 文件开头加了一段@import——这里加的东西，等于全量引入
Sass 的“按需”本质是人工裁剪 + 工具约束，不是语言特性。最有效的控制点永远在 @use / @import 的那一行，以及你有没有真的删掉不用的 _ 文件。
