className 动态拼接导致样式丢失，因构建工具仅识别静态类名；需在 CSS 中预定义所有可能类名或通过 styles 对象访问 CSS Modules 类名。
为什么 className 拼接字符串后样式丢失
React 中用 className={baseClass + ' ' + dynamicClass} 或模板字符串拼接类名时，Webpack（尤其是使用 css-loader + style-loader）根本不会识别这些字符串里的类名，它们不会被纳入 CSS 依赖图，自然也不会被打包进最终的 CSS 文件或内联 style 标签中。本质是：构建工具只解析静态的、可静态分析的类名引用，比如 className="btn btn-primary" 或 className={styles.btn}。
常见现象包括：开发环境能看到样式（因为某些插件如 react-refresh 或 HMR 临时注入），但 build 后按钮没圆角、颜色失效、甚至整个组件无样式；检查元素发现 class 属性存在，但对应 CSS 规则缺失。
- 动态拼接的类名（如
className={`card ${size}-theme`}）不会触发 CSS 模块解析 - 第三方库（如
classnames）本身不解决打包问题，它只是拼字符串——仍需确保每个传入的类名字符串能被构建工具“看见” - 若用的是 CSS Modules，
styles[size + '-theme']这种写法会返回undefined，因为模块对象的 key 是编译时确定的静态字符串
如何让动态类名被 Webpack 正确识别并打包
核心思路：把所有可能用到的类名，以静态方式“暴露”给 css-loader。不是阻止拼接，而是让拼接所依赖的原始类名被提前声明。
- 对普通 CSS/SCSS：在样式文件中显式写出所有变体，例如：
.card-sm-theme { /* ... */ }<br>.card-md-theme { /* ... */ }<br>.card-lg-theme { /* ... */ }然后在 JSX 中用className={`card ${size}-theme`}——只要sm-theme、md-theme等字符串在 CSS 文件里真实存在，且你没有启用purgeCSS或cssnano的 aggressive tree-shaking，它们就会保留 - 对 CSS Modules：必须通过
styles对象访问，不能靠字符串拼 key。正确做法是预先映射：const themeClasses = {<br> small: styles['card-sm-theme'],<br> medium: styles['card-md-theme'],<br> large: styles['card-lg-theme']<br>};<br>// 然后用 className={themeClasses[size]} - 如果用 Tailwind，确保
content配置包含所有可能的动态类名生成逻辑路径（如src/**/*.{js,jsx,ts,tsx}），否则tailwindcss的 JIT 模式会漏掉sm:px-2这类条件类
classnames 库是否能解决这个问题
不能直接解决打包问题，但它能帮你规避拼接错误和提升可读性。它的作用仅限于“安全拼接”，而非“让构建工具识别类名”。
立即学习“前端免费学习笔记（深入）”；
-
classnames('btn', size === 'large' && 'btn-lg', isLoading && 'btn-loading')—— 这里'btn'、'btn-lg'、'btn-loading'都是字面量字符串，只要它们出现在 CSS 文件里，就能被打包 - 但如果你写成
classnames('btn', `${size}-btn`)，而size是运行时变量，构建工具依然看不到'small-btn'或'large-btn'这些具体值 - 注意：搭配 CSS Modules 时，不要传入
styles.xxx的返回值以外的字符串，否则会输出无效 class 名（如undefined或空格）
使用 require('*.module.css') 时的典型陷阱
CSS Modules 的 import styles from './Button.module.css' 是编译时静态解析的，任何试图绕过对象属性访问的写法都会失败。
- ❌ 错误：
styles[`${size}Btn`]——size是变量，key 不可静态分析，结果为undefined - ✅ 正确：
styles[`${size}Btn` as keyof typeof styles]（TypeScript 下需类型断言，但仍不推荐，因破坏 tree-shaking 可能性） - 更稳妥的做法是枚举所有合法值：
const sizeClasses: Record<string, string> = {<br> small: styles.smallBtn,<br> large: styles.largeBtn<br>};<br>className={sizeClasses[size] || styles.defaultBtn} - 如果项目用了
babel-plugin-react-css-modules或类似方案，注意它只处理styleName属性，不处理className，别混用
实际项目里最常被忽略的点是：你以为构建工具“懂 JS 逻辑”，其实它只懂 AST 上的字面量和 import 关系。哪怕一行 const cls = 'foo-bar'; <div className={cls}>，只要 foo-bar 没在 CSS 文件里明确定义，它就不会进包。
