根本原因是全量导入而非编译器问题；应手动按需导入子模块（如grid、buttons），配置sideEffects声明SCSS无副作用，禁用Babel模块转换，并配合PurgeCSS清理未用类名。
SCSS编译后CSS体积过大，根本原因不是编译器本身，而是你导入了太多没用的样式文件。Tree Shaking 对纯 CSS 文件不生效，但对 SCSS 模块化结构有效——关键在「怎么 import」和「package.json 怎么声明」。
只导入需要的 SCSS 组件文件
直接 @import "bootstrap.scss" 或 @import "nes.scss" 会把整个框架全量引入，哪怕只用了一个按钮。SCSS 的 @import 是预处理时的文本拼接，没有模块边界，Tree Shaking 工具无法识别哪些部分未被使用。
- ✅ 正确做法：跳过完整入口，手动导入子模块。例如 Bootstrap 5 中只用 grid 和 buttons：
@import "scss/functions"; @import "scss/variables"; @import "scss/mixins"; @import "scss/grid"; @import "scss/buttons";
- ❌ 错误写法：
@import "scss/bootstrap.scss"（包含全部 30+ 组件） - 注意：所有被导入的文件必须是纯样式（无 JS 注入、无运行时副作用），否则后续
sideEffects配置会失效
配置 package.json 的 sideEffects 字段
Webpack 默认不敢删掉任何 @import "./xxx.scss"，因为它不确定这些文件是否在执行全局样式注入、修改 DOM 或触发浏览器重排。你需要显式告诉它：“这些 SCSS 文件只是定义样式，删掉没副作用”。
- 在
package.json中添加：
"sideEffects": [ "*.scss", "*.css", "src/styles/**/*.scss" ]
- ⚠️ 如果你项目里有带副作用的 SCSS（比如某文件里写了
document.body.classList.add(...)），不能把它列进sideEffects，否则会被误删 - 如果整个项目没有副作用，可以简写为
"sideEffects": false，但极不推荐——一旦某个 SCSS 文件里调用了url()引用字体或图片，就会导致资源丢失
避免 Babel 把 ES6 模块转成 CommonJS
如果你在 JS 中通过 import './styles/main.scss' 方式引入 SCSS，并且用了 Babel 编译，而 Babel 配置里 modules: 'commonjs'（默认行为），那 Webpack 就看不到原始的 ES 模块结构，usedExports 和 Tree Shaking 会完全失效。
立即学习“前端免费学习笔记（深入）”；
- 确保
babel.config.json中 env preset 显式关闭模块转换：
{
"presets": [
["@babel/preset-env", { "modules": false }]
]
}
- 同时 Webpack 配置中
mode: 'production'必须启用，且optimization.usedExports: true要显式打开（Webpack 5+ 默认开启，但老项目常被覆盖） - 验证是否生效：检查最终打包产物里是否还存在未使用的 SCSS 变量、mixin 或 class 定义——它们不该出现在输出 CSS 中
配合 PurgeCSS 做二次清理（针对动态类名）
Tree Shaking 解决的是「源码中未 import 的样式」，但解决不了「已 import 却没在 HTML/JS 中出现的 class 名」。比如你导入了所有 Bootstrap utilities，但只用了 mt-2，没用 ms-5，这部分仍会留在 CSS 里。
- 在构建流程中加入
purgecss-webpack-plugin或postcss-purgecss - 配置需明确指定内容路径，例如：
new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
})
- ⚠️ 注意：Vue / React 中的动态 class（如
:class="[isActive ? 'active' : '']"）必须显式白名单，否则会被误删 - PurgeCSS 不是 Tree Shaking 的替代品，而是互补——一个删“没 import 的”，一个删“import 了但没用的”
真正卡住体积优化的，往往不是技术开关没开，而是团队沿用旧习惯：一个 @import 全家桶、Babel 默认转模块、sideEffects 留空、连 PurgeCSS 都没配白名单。这四步缺一不可，且顺序不能乱——先管住 import，再声明副作用，再保模块形态，最后扫动态残留。
