全局CSS必须用import './xxx.css'，不能加.module后缀；它会注入<head>的<style>标签使样式全局生效，而.module.css天生局部化且编译后带哈希名无法匹配。
全局CSS必须用 import './xxx.css'，不能加 .module
想让样式全局生效，就别碰 .module.css——它天生是局部的，哪怕你只写一个 .btn，构建后也会变成类似 Button_button__abc123 的哈希名，根本无法被其他组件或 HTML 元素匹配到。
真正起作用的写法只有一种：import './base.css' 或 import '@/styles/reset.css'。这个 import 会触发构建工具（Vite/Webpack）把 CSS 内容注入 <head> 里的 <style> 标签，所有地方都能用 className="header" 直接命中。
- 文件命名随意，
global.css、index.css、reset.module.css（⚠️错！带.module就失效）都行 - 路径必须正确，常见错误是误写成
import styles from './base.css'—— 这会导致 React 报错Attempted to import a non-existent module - 不要在
.module.css里@import './base.css'—— 构建工具不支持，且破坏模块边界
哪些内容适合放全局CSS
全局 CSS 不是“随便塞样式的地方”，而是承担特定职责的基础设施层。放错位置，后期维护成本会指数级上升。
-
:root里定义 CSS 变量（--primary-color）、字体族、间距比例等跨组件共享配置 - 重置样式（
normalize.css或自定义* { margin: 0; padding: 0; }），确保各浏览器渲染一致 - 工具类（
.sr-only、.visually-hidden、.clearfix），它们本意就是被任意组件复用 - 第三方库的样式入口，比如
import 'antd/dist/reset.css'或import 'swiper/swiper-bundle.css'
千万别把某个组件的 .card 或 .modal-overlay 放进全局 CSS —— 一旦多人协作，很快就会出现 “我改了 .card，结果登录页的卡片也变了” 这种问题。
立即学习“前端免费学习笔记（深入）”；
全局CSS和CSS Modules能共存吗
能，而且应该共存。它们不是替代关系，是分工关系：全局 CSS 负责“底座”，CSS Modules 负责“砖块”。
例如你在 src/index.css 里写了 .btn { padding: 8px 16px; }，同时又在 Button.module.css 里写了 .btn { background: blue; color: white; } —— 两者不会冲突，因为后者编译后实际类名是 Button_btn__xyz789，压根不会匹配到全局那个 .btn。
- 构建时，
import './index.css'输出为全局<style>块；import styles from './Button.module.css'输出为带哈希的局部类名 - 如果真想覆盖全局样式（比如主题切换时重置按钮背景），得用更高优先级选择器，例如
body.dark-theme .btn，而不是指望模块内样式“赢过”全局 - SSR 场景下，全局 CSS 会在首屏 HTML 中内联，而模块 CSS 仍需 JS 加载后才注入 —— 这点会影响 FOUC，但属于已知行为，不是 bug
为什么 import './App.css' 在 App.js 里看起来像“组件级”，实则仍是全局
很多人误以为写在某个组件文件里的 import './App.css' 就只影响这个组件，其实完全不是。只要用了普通 .css 后缀，构建工具就把它当全局资源处理，不管 import 出现在哪。
- 哪怕
App.js是根组件，import './App.css'也会让其中所有类名（如.header）在整个页面任何地方生效 - 动态路由下，用户没访问 /admin，但
Admin.module.css没加载，Admin.css却早已随首页一起注入 —— 这就是“非按需”的典型表现 - 热更新时，修改
App.css会触发整个页面样式重刷，而修改App.module.css只影响该组件 DOM 节点
真正需要“组件级作用域”的地方，别犹豫，直接上 .module.css；只想统一管理字体、重置、变量？import './base.css' 就是唯一正解。混淆这两者，是 React 项目样式失控最常见起点。
