关键是要准确告诉打包工具哪些 css 有副作用必须保留，而非阻止删除；应避免 sideeffects: false，改用数组如 ["*.css"] 或精确路径，并确保构建链路不破坏静态 import 分析。
要防止带副作用的 CSS 被 Tree Shaking 误删，关键不是“阻止删除”，而是**准确告诉打包工具哪些 CSS 确实有副作用、必须保留**。因为 sideEffects: false 会把所有未被静态引用的模块（包括 import './style.css'）直接剔除——而这类导入本就不导出值，全靠副作用生效。
明确列出含副作用的 CSS 文件路径
不要设 "sideEffects": false，改用数组形式，只把真正执行样式注入的 CSS 文件加进去：
-
匹配通配符：如
"*.css"（适用于所有普通 CSS）、"*.scss"（SCSS 编译后仍是 CSS 副作用） -
精确路径：如
"src/styles/global.css"、"src/themes/dark.scss" -
注意范围：路径是相对于
package.json的，不是源码路径；Webpack 5+/Vite 会按实际打包后路径匹配（通常是编译后的.css）
区分“纯样式”和“带 JS 副作用”的 CSS
有些 CSS 文件看似只是样式，实则内嵌了运行时逻辑（比如通过 @import url(...) 加载字体、或配合 JS 动态切换类名），这类文件必须显式列入 sideEffects：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 安全列入：
import './reset.css'（仅重置样式，无 JS 交互） - ⚠️ 必须列入：
import './theme-loader.scss'（内部调用document.documentElement.setAttribute） - ❌ 不要列入：
import './button.module.css'（CSS Modules 是局部作用域，通常无全局副作用，可不列）
避免构建链路破坏静态分析
即使 sideEffects 配对正确，若构建流程把 import 转成了 require，Tree Shaking 就失效：
- Babel 配置中确保
"modules": false（禁用模块转换） - TypeScript 中
compilerOptions.module设为"ESNext"或"ES2020" - SCSS Loader 不要启用
additionalData注入 JS 逻辑，否则该文件已超出纯 CSS 范畴
验证是否生效
构建后检查 dist 目录下的 CSS 是否完整存在，再手动搜索 bundle.js 中是否有不该出现的样式类名丢失：
- 在某个 CSS 文件里加一句明显标识，如
/* TREE_SHAKING_TEST */ - 构建后打开生成的 CSS 文件，确认该注释还在
- 如果缺失，说明它被当作了无副作用模块剔除了——要么路径没匹配上，要么被 Babel 转义破坏了 import 结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
