react中import的css文件没生效，根本原因是webpack默认将css插入且无作用域控制；若要模块化，必须使用.module.css命名并import styles from './x.module.css'，否则样式裸奔、易冲突。
React中import的CSS文件为什么没生效
默认情况下，import './Button.css' 只是把样式加载进全局作用域，组件间样式会互相污染。比如两个组件都定义了 .title，后加载的会覆盖前一个——这不是模块化，是样式“裸奔”。
根本原因在于 Webpack 默认用 style-loader 把 CSS 插入 ，不带任何作用域控制。
- 确认你项目里没误配
css-loader的modules: false（Create React App 默认关闭 CSS Modules） - 检查文件扩展名：必须是
.module.css或.module.scss，否则 Webpack 不会启用模块化逻辑 - 别在
index.css或全局入口里 import 模块化文件——它会被当作普通 CSS 处理
如何正确启用CSS Modules（以CRA为例）
Create React App 从 v2 起原生支持 CSS Modules，但只对特定命名的文件生效。不需要改 webpack 配置，只要改文件名和 import 方式即可。
- 把
Button.css改成Button.module.css - import 时接收返回的对象：
import styles from './Button.module.css' - 在 JSX 中用对象属性代替字符串类名：
<button classname="{styles.button}"></button> - 编译后类名自动哈希化，如
Button_button__Kf4n2，天然隔离
注意：styles 是 JS 对象，不是字符串，不能拼接或动态构造键名（styles['btn-' + type] 会是 undefined）。
遇到 :global() 或嵌套失效怎么办
CSS Modules 默认把所有选择器局部化，但有些场景需要穿透或复用全局样式，比如重置第三方组件、或定义主题变量。
-
:global(.reset)包裹的选择器不加哈希，直接输出为.reset - 嵌套写法（如
.container { .item { color: red; } }）在原生 CSS Modules 中不被支持；需配合postcss-nested插件，且 CRA 默认不启用——建议改用styled-components或直接写扁平结构 - 想复用其他模块的类？不行。CSS Modules 之间默认不互通；若真需共享，把公共样式提成
shared.module.css，再分别 import
常见错误：:global 写成 :global（少括号）或放在嵌套块内部——它只能出现在顶层规则中。
与CSS-in-JS方案相比，CSS Modules的硬伤在哪
它解决的是「选择器冲突」，但没解决「条件样式难维护」「响应式写法冗长」「主题切换成本高」这些问题。
- 动态类名要写一堆三元表达式：
className={`${styles.btn} ${props.primary ? styles.primary : ''} ${props.loading ? styles.disabled : ''}`} - 媒体查询必须写死在 CSS 文件里，无法根据 props 动态生成断点
- 主题色变更需手动替换所有
color: var(--primary)并确保 CSS 变量已注入，没有运行时接管能力 - 服务端渲染时，若未正确提取模块化 CSS，可能漏样式或重复插入
如果你的组件需要高频响应 props 变化、或设计系统复杂度高，CSS Modules 很快会变成维护负担——这时候该考虑 clsx 辅助拼接，或直接切到 emotion 这类支持运行时样式的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
