import './xxx.css'会将样式注入head的style标签，全局生效且无作用域隔离；css modules通过哈希化类名实现组件级作用域，需用.module.css后缀和styles对象访问；三者定位不同，可共存但不宜混用。
React里import './xxx.css'到底发生了什么
直接 import CSS 文件，本质是让 Webpack（或 Vite）把样式内容注入到 的 <style></style> 标签里，全局生效。它不隔离、不作用域、不防冲突。
- 适用于重置样式、全局主题色、第三方 UI 库的 CSS（比如
import 'antd/dist/reset.css'） - 所有组件都能访问这些类名，
.btn写一次，全项目都能用，但也意味着谁都能改它 - 热更新时样式会重新插入，但旧的
<style></style>标签不会自动移除，可能堆积（开发时常见，构建后不影响） - 没有类型提示，拼错类名只有运行时才发现，编辑器也补不出来
CSS Modules 的 class 名为什么总带哈希后缀
CSS Modules 不是语法标准，而是构建工具对 CSS 文件的“编译处理”：把每个 .xxx 类名自动重命名为类似 Button_button__abc123 这样的唯一字符串，确保只在当前组件内有效。
- 文件必须以
.module.css结尾（如Button.module.css），否则 loader 不触发 - 导入后得到的是一个对象：
import styles from './Button.module.css'→styles.button才是真实类名 - 不能在 CSS 里用
:global(.xxx)随意逃逸，除非真需要覆盖第三方样式，否则破坏封装性 - 动态拼接类名要小心：
className={styles['button-' + size]}会失效，因为button-large并不在styles对象里
为什么 CSS Modules 里写 :hover 没反应
不是没反应，是写法不对。CSS Modules 只处理类名，不改变 CSS 规则本身；但如果你写了 .button:hover，它会被正确编译并绑定到该组件的 button 类上——前提是类名确实被用了。
- 检查是否漏了
className={styles.button}，光写 CSS 没用 - 避免在
:hover里引用另一个本地类名，比如.button:hover .icon，因为.icon也会被哈希化，而你没在 JS 里显式引用它 - 想复用伪类逻辑？直接用
styles.button在 JS 里控制className更可靠，比如结合useState切换styles.buttonActive - Vite 用户注意：默认开启 CSS Modules，但若配置了
css.modules.localsConvention，可能影响生成规则（比如设为'camelCaseOnly'后button-large就不能用点号访问）
要不要用 styled-components 或 Tailwind 替代它们
不是“替代”，是“不同分工”。import CSS 和 CSS Modules 解决的是「如何加载和作用域样式」，而 styled-components 是「用 JS 写样式逻辑」，Tailwind 是「用原子类组合样式」。三者能共存，但混用容易失控。
立即学习“前端免费学习笔记（深入）”；
- 如果项目已有大量 CSS 文件，且团队熟悉 BEM，继续用
.module.css最省力 - 需要高度动态样式（比如根据 props 改颜色、动画参数），
styled-components的插值更自然，但要多引入一个运行时 - Tailwind 要求放弃手写 CSS，靠类名堆叠，对 CSS Modules 的局部性没帮助，反而可能因全局类名泛滥削弱作用域优势
- 真正容易被忽略的点：CSS Modules 的
composes功能（如composes: button from './Base.module.css'）现在基本没人用，Vite/Webpack 5+ 对它的支持也不如以前稳定
