bootstrap类名不能直接用styles.xxx访问，因其定义在全局css中，而css modules仅处理.module.css文件；若webpack误将bootstrap.min.css当作模块处理，会导致类名哈希化失效，必须隔离全局与模块化css加载路径。
Bootstrap类名不能直接用styles.xxx访问
你写import styles from './Button.module.css'后，styles.btn永远是undefined——因为Bootstrap的.btn定义在全局CSS里，而CSS Modules只处理以.module.css结尾的文件。Webpack配置中若对.css启用了modules: true，反而会让bootstrap.min.css被当作模块处理，导致所有类名被哈希化、失效。
必须隔离全局CSS与模块化CSS的加载路径
核心原则：Bootstrap的CSS走全局作用域，你自己的样式走模块作用域。Webpack或Create React App默认支持.module.css自动启用模块化，但要确保.css文件不被误处理。
- 确认
webpack.config.js中css-loader配置没有对所有.css启用modules: true，应仅针对/\.module\.css$/生效 - Bootstrap引入必须用
import 'bootstrap/dist/css/bootstrap.min.css'（在index.js或App.js顶部），不能写成import bootstrap from './node_modules/bootstrap/dist/css/bootstrap.min.css' - 自己写的样式文件必须命名为
xxx.module.css，并在JSX中用className={styles.myButton}；Bootstrap类名则直接写字符串：className="btn btn-primary"
混用时怎么避免类名冲突或覆盖？
当Button.module.css里也写了.btn，它会和Bootstrap的.btn发生层叠冲突，且由于CSS Modules生成的类名带哈希，优先级可能反超Bootstrap——结果是按钮样式错乱。
- 禁止在
.module.css里定义与Bootstrap同名的工具类（如.btn、.container、.d-flex） - 如果需要微调Bootstrap组件，用更具体的选择器，比如
.my-button-wrapper .btn，或加!important（不推荐） - 更稳妥的做法：用CSS变量覆盖Bootstrap默认值（如
$primary），而不是重写类名
想用classNames拼接时别漏掉空格
React中拼接多个类名容易出错，尤其混合全局类和模块类时。
- 错误写法：
className={styles.container + "row"}→ 会变成container_xyz123row，没空格 - 正确写法：
className={`${styles.container} row`}或className={[styles.container, "row"].join(" ")} - 推荐用
clsx库：className={clsx(styles.container, "row", {"d-none": isHidden})}
真正难的不是“怎么写”，而是记住哪些类必须全局、哪些能模块化——一旦把Bootstrap CSS当成模块导入，整个栅格系统就静默失效了，调试时很难定位到根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
