import './button.css'会全局污染，因构建工具将其视为普通css，类名原样注入head，无哈希无隔离；正确做法是文件名用.module.css后缀且import styles from './button.module.css'。
为什么 import './Button.css' 会污染全局？
因为这种写法让构建工具（Webpack/Vite）把它当普通 CSS 处理，所有类名原样注入 document.head，.btn、.container 这类通用名直接覆盖其他组件的同名样式。它不生成哈希，也不做作用域隔离，等于在全局 CSS 文件里写规则——而你根本没意识到。
常见错误现象：Button 组件改了 .btn 的 padding，结果 Modal 里的确认按钮也变矮了；Ant Design 的 .ant-btn 被你项目里的 .btn 覆盖，主题色全乱。
- 不是“引入方式错了”，是“文件名 + 导入方式 + 构建配置”三者必须匹配
- 哪怕只差一个字母，比如
Button.modules.css（多了一个 s），就等同于Button.css - Vite 默认支持
.module.css，但 Webpack 需确保css-loader的modules: true仅对匹配文件生效（不能全局开启）
如何正确启用 CSS Modules 并按需加载？
核心就两条：文件名带 .module.css 后缀，且用对象解构方式导入。
- ✅ 正确路径和命名：
./Button.module.css（不是Button.css，也不是Button.scss） - ✅ 正确导入：
import styles from './Button.module.css'（不是import './Button.module.css'） - ✅ 正确使用：
className={styles.btn}（styles是 JS 对象，键是原始类名，值是哈希字符串） - ⚠️ 注意：如果用
import * as styles from './Button.module.css'，在 CRA 中会得到空对象，Vite 下可能正常但不可靠
示例片段：
/* Button.module.css */
.btn {
padding: 8px 16px;
}
.primary {
background: #007bff;
}
/* Button.tsx */
import styles from './Button.module.css';
export default function Button() {
return <button classname="{styles.btn}">Click</button>;
}
动态类名拼接时为什么 className 变成 "undefined"？
因为 styles.xxx 是可选属性，直接字符串拼接会把 undefined 转成字面量字符串，React 不报错但最终 class 属性值是 "btn undefined"，浏览器忽略非法类名，样式丢失。
- ❌ 危险写法：
className={`${styles.btn} ${styles.primary}`} - ✅ 安全写法：
className={clsx(styles.btn, condition && styles.primary)} - ✅ 更稳妥（尤其 TypeScript 项目）：
className={clsx(styles.btn, condition ? styles.primary : null)} - ? 开发期加
console.log(styles)确认导出内容；VS Code 插件 CSS Modules IntelliSense 可补全类名，避免拼错
第三方 UI 框架（如 CoreUI、AntD）能用 CSS Modules 吗？
不能直接套用。它们的 SCSS/CSS 是为全局设计的，含重置规则（reboot）、变量定义（:root）、通配符选择器（* {}），模块化后这些规则失效或错位。
- ✅ 推荐做法：用
id或唯一 class 包裹容器，再通过:global()局部透出规则，例如：#dashboard :global(.cui-btn) { ... } - ✅ 按需导入路径（如
import 'coreui/scss/components/_buttons.scss'），但需确保构建工具支持 SCSS 且未启用模块化 - ❌ 不要尝试把
coreui.scss改名成coreui.module.scss—— 变量、嵌套、@import全部崩坏 - ⚠️ 注意：CSS-in-JS（如 Emotion）更适合封装第三方组件的定制样式，而不是硬套 CSS Modules
真正容易被忽略的点是：CSS Modules 不是“开关”，而是构建工具基于文件名的约定行为。它不报错、不警告，静默退化为全局样式——你得自己盯紧文件名、导入语句、控制台输出的 styles 对象，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
