SCSS 本身不支持按需加载，因其是编译时预处理器，所有 @import/@use 均静态合并；真正实现按需加载依赖构建工具（如Vite/Webpack）配合JS动态import与组件级SCSS分离。
SCSS 本身不支持按需加载——它只是编译时预处理器，所有 @import 或 @use 的文件都会在构建阶段被静态解析并合并进最终 CSS。所谓“SCSS 按需加载”，实际是前端工程链路的协同问题，核心在构建工具配置和代码组织方式。
为什么 @import 和 @use 都不能实现运行时按需加载
SCSS 编译器（如 Dart Sass）在构建时就完成全部依赖解析：@import "components/button" 或 @use "utils/mixins" 都会无条件注入对应内容到输出 CSS 中。即使你在 JS 里动态 import 某个组件，只要它的 SCSS 被主入口 @use 过，样式就已打进 main.css。
- 常见错误现象：页面只用
Alert组件，但 DevTools 网络面板看到main.css包含了.modal、.tooltip全部规则 - 根本原因：SCSS 层面没有“导出样式作用域”或“条件编译开关”
- 真正可控的边界在 JS 模块系统（如 ES module）与构建工具（Vite/Webpack）对 CSS 的 chunk 划分能力
用 Vite 的 css.codeSplit + 组件级 SCSS 分离实现样式拆包
关键不是改 SCSS 写法，而是让每个组件的 SCSS 只被其对应的 JS 模块引用，并交由构建工具自动提取为独立 CSS chunk。
- 把组件样式写在同目录下
Button.scss，JS 中用import "./Button.scss"（不是@use） - Vite 默认开启
css.codeSplit: true，当Button.vue或Button.tsx被动态 import 时，其关联的Button.scss会随 JS 一起被打包进 async chunk - 确保
vite.config.ts中未设置build.rollupOptions.output.manualChunks强制合并 CSS - 避免在
main.scss中@use "@/styles/variables"—— 改为每个组件 SCSS 单独@use，否则变量仍会全局污染
Webpack 中通过 mini-css-extract-plugin 提取异步 CSS
Webpack 默认把所有 import './xxx.scss' 打进一个 main.css，必须显式配置分离逻辑。
立即学习“前端免费学习笔记（深入）”；
- 安装
mini-css-extract-plugin并在webpack.config.js的plugins中启用 - 将
style-loader替换为MiniCssExtractPlugin.loader，尤其在production模式下 - 关键配置项：
optimization.splitChunks.chunks: 'async'（默认值），确保只有异步引入的模块才触发 CSS 提取 - 验证方式：查看 dist 目录是否生成类似
src_components_Modal_tsx.1a2b3c.css的文件，且 HTML 中该 CSS 仅在 Modal 组件加载时插入
SCSS 文件组织必须配合模块化原则，否则拆包失效
即使构建工具支持拆包，如果 SCSS 结构违背模块边界，样式仍会泄露或重复打包。
- 禁止跨组件共享
@mixin或$variable的全局 SCSS 入口（如index.scss）—— 改用postcss-import或 CSS 自定义属性替代 - 每个组件 SCSS 应只包含自身选择器，避免使用
html、body等宽泛祖先选择器，防止样式意外提升作用域 - 慎用
@forward：它会让被转发的文件内容提前进入引用链，破坏拆包粒度；改用直接@use到具体组件文件 - 若需主题色等全局配置，建议抽成
:root { --primary: #007bff; }，由 JS 动态切换 class，而非依赖 SCSS 变量重编译
最容易被忽略的一点：SCSS 拆包效果完全依赖 JS 的动态 import 行为。如果你的组件是同步 import Button from './Button'，那它的 SCSS 就永远属于 initial chunk——别怪 SCSS，要检查你的模块引入方式。
