scss 本身不支持 tree shaking，需通过 sideeffects 声明、禁用 babel 模块转换、启用 usedexports，并依赖 purgecss 扫描模板类名实现 css 级别摇树。
SCSS 本身不支持 Tree Shaking，但 React 项目中可以配合 Webpack 实现 CSS 级别的“摇树”效果——关键不在 Sass 编译器，而在你 import 的方式、package.json 的 sideEffects 声明，以及是否引入了 PurgeCSS 这类运行时扫描工具。
为什么 import './styles/main.scss' 摇不掉未用样式？
Webpack 看到的是一个 ES 模块导入语句，但它无法解析 SCSS 文件内部哪些 .btn、.modal 类实际被 DOM 或 JS 引用。SCSS 的 @import 是预处理期文本拼接，没有导出/导入语义；即使你只写了 @use "bootstrap/scss/buttons"，Webpack 也不知道你有没有调用 button-variant() mixin。
-
@import会无条件合并全部内容，Tree Shaking 完全失效 -
@use提供命名空间隔离，但不产生可分析的export，Webpack 仍视其为“有副作用的纯样式文件” - 只要没显式声明
"sideEffects": ["*.scss"]，Webpack 就不敢删任何一行 CSS
必须配置 package.json 的 sideEffects 字段
这是让 Webpack 敢于删除未引用 SCSS 文件的前提。它不是告诉 Webpack “这些文件可以被摇”，而是说：“这些文件除了定义样式，不执行任何操作（比如修改 DOM、触发重排、url() 加载字体）”。
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
- 写成
"sideEffects": false极危险：一旦某个 SCSS 里用了url("./icon.svg")，构建会丢资源 - 推荐精确声明：
"sideEffects": ["*.scss", "*.css", "src/styles/**/*.scss"] - 如果项目里真有带副作用的 SCSS（例如含
@at-root { body { overflow: hidden; } }），不能把它放进这个列表
禁用 Babel 的模块转换，否则 usedExports 失效
如果你在 JS 中写 import './App.scss'，而 Babel 把它编译成 require('./App.scss')，Webpack 就看不到原始的 ES 模块结构，optimization.usedExports 彻底失能。
- 检查
babel.config.json，确保@babel/preset-env配置了{"modules": false} - 不要依赖默认 preset 行为；Create React App 用户需
npm run eject后手动改 - Webpack 配置中必须启用
mode: 'production'和usedExports: true
真正起效靠 PurgeCSS 扫描模板类名
SCSS 层面的 Tree Shaking 是“模块级裁剪”，而 PurgeCSS 是“选择器级清理”——它读取你的 JSX、TSX、HTML 文件，提取所有出现的类名，再反向过滤 CSS 输出。这才是你能看到体积明显下降的直接原因。
- 用
purgecss-webpack-plugin，配合glob-all匹配所有源码路径 - 注意正则匹配：JSX 中的
className="btn btn-primary"和class="container"都要被识别 - 避免误删：若用动态拼接类名（如
className={`btn ${type}-btn`}），需在purgecss配置中加whitelistPatterns
最常被忽略的一点：SCSS 的 Tree Shaking 不是开个开关就能生效的链路，而是一整套协同机制——@use 控制导入粒度、sideEffects 解除 Webpack 的安全顾虑、Babel 保留原始 import、PurgeCSS 做最终兜底。漏掉任意一环，体积就卡在那儿不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
