scss默认无法被tree shaking，因其@import是预处理文本拼接、无es模块语义，webpack仅识别“文件被引入”而无法分析内部样式使用；需改用@use按需导入子模块、声明sideeffects、禁用babel模块转换，并配合purgecss扫描模板类名兜底剔除。
SCSS 文件本身不支持 Tree Shaking，但你可以让构建工具（如 Webpack）对 SCSS 的导入链做有效裁剪——前提是严格控制 @use 和 @import 的方式，并配合 sideEffects 声明与构建配置。否则，哪怕开了 usedExports，也只会摇掉 JS，摇不动一行 CSS。
为什么 SCSS 默认无法被 Tree Shaking？
Tree Shaking 依赖 ES Module 的静态 import/export 分析，而 SCSS 的 @import 是预处理期文本拼接，@use 虽有命名空间隔离，但不产生可导出的模块语义。Webpack 看不到“哪些 mixin 或 class 实际被调用”，只看到“这个 .scss 文件被 import 了”，于是整份样式照单全收。
- 错误现象：
import './styles/main.scss'后，即使只用了.btn，最终 CSS 里仍有.modal、.tooltip、.carousel - 根本原因：不是 Sass 编译器问题，而是构建层无法识别“未使用样式”
- 关键前提：只有当 SCSS 文件被当作 ES Module 引入（即通过 JS 中的
import），且无副作用，才可能参与摇树
如何让 SCSS 参与 Tree Shaking？
核心是切断“全量引入”路径，把 SCSS 当作模块来管理，而非拼接文本。
- 必须用
@use替代@import：前者提供作用域隔离，后者只是字符串合并；但注意@use本身不自动剔除未调用内容，仍需人工控制导入粒度 - 跳过框架入口文件，直接
@use "bootstrap/scss/buttons"、@use "bootstrap/scss/grid"，而不是@use "bootstrap/scss/bootstrap" - 确保所有被
@use的 SCSS 文件纯样式无副作用：不能含document.body.classList.add()、@at-root { body { ... } }这类运行时或全局注入逻辑 - 在
package.json中显式声明"sideEffects": ["*.scss", "*.css"]，告诉 Webpack：“这些文件只定义样式，删掉不影响行为”
哪些配置会让 Tree Shaking 失效？
即使代码写得再规范，一个配置错误就能让整套机制归零。
- Babel 把
import './style.scss'编译成require('./style.scss')：Webpack 就看不到原始 import，usedExports彻底失效；解决方法是 Babel 配置中设modules: false -
sass-loader没配sassOptions.outputStyle: 'compressed'：输出 expanded 格式，后续压缩插件多压一遍，但体积膨胀主因不在空格，而在重复规则未剔除 - 开启
sourceMap: true：不仅增大产物体积，还可能干扰 PurgeCSS 对选择器的匹配精度 - 误信变量开关（如
$enable-modals: false）：Bootstrap 类变量只控制部分分支，不阻止@include modal-styles()被展开，真正安全的是不@use对应文件
Tree Shaking 不是终点，PurgeCSS 才是兜底
SCSS 层面的按需导入只能减少编译输入，最终 CSS 中是否残留未用类名，得靠模板级分析工具确认。
-
purgecss或unocss是必需环节：它们扫描 HTML/JSX/Vue 模板中的实际类名，反向剔除 CSS 中未出现的选择器 - 不要只看 SCSS 文件行数少就以为体积小——
main.scss20 行 +@use "bootstrap/scss/utilities"可能产出 120KB CSS - 验证方式：构建后打开 dist/*.css，搜索
.modal、.tooltip等关键词，真实存在才说明没摇干净
真正起作用的从来不是某一行 @use，而是从导入路径、构建配置、副作用声明到模板扫描的整条链路。漏掉任意一环，Tree Shaking 就只是个开关开着的摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
