CSS加载顺序取决于HTML中和的实际插入顺序，而非JS中import语句的书写顺序；应将reset.css、base.css等基础样式通过手动置于index.html中，禁用其JS import，组件样式继续用CSS Modules。
React 17 项目中引入 CSS 文件本身很简单，但「控制加载顺序」才是真正容易出问题的地方——它不取决于 import 语句在 JS 里的位置，而取决于构建工具如何把 CSS 注入到 HTML 中。
为什么 import './a.css' 和 import './b.css' 的顺序不决定样式生效顺序？
Webpack/Vite 会把所有 import './x.css' 收集起来，统一打包进一个或多个 CSS chunk，再通过 style-loader（或 Vite 的内置逻辑）动态插入 标签到 。这意味着：JS 文件里 import 的先后顺序 ≠ 最终 DOM 中 的插入顺序。
- 多个组件各自
import './Button.css'，样式可能被合并到同一个块里，顺序由打包器内部算法决定 - 如果用了 SplitChunks 或 CSS 提取插件（如 mini-css-extract-plugin），不同 CSS 可能变成独立
，这时才真正依赖 HTML 中的插入顺序 -
import './reset.css'写在App.js开头，不代表它一定最先应用；若它被抽成异步 chunk，甚至可能晚于主包里的样式
想确保 reset.css → base.css → component.module.css 的层叠优先级，该怎么做？
唯一可靠的方式是让它们成为独立、同步加载的 标签，并严格控制其在 中的书写顺序。React 17 项目（尤其非 CRA）需手动干预：
- 把基础样式（
reset.css、base.css）放在public/index.html的中，紧贴<link rel="stylesheet" href="%PUBLIC_URL%/css/reset.css"><link rel="stylesheet" href="%PUBLIC_URL%/css/base.css">
- 禁用这些文件的 JS import —— 不要再写
import './reset.css'，否则会重复注入，且顺序不可控 - 组件级样式继续用
import styles from './Button.module.css'，它生成的哈希类名天然不参与全局层叠，无需担心顺序 - 第三方 UI 库（如 Ant Design）的 CSS 也应走
引入，并放在base.css之后、自定义组件样式之前
使用 CSS Modules 时，import 顺序还重要吗？
不重要。CSS Modules 的作用域隔离机制决定了：哪怕 Button.module.css 先 import，Modal.module.css 后 import，二者生成的类名（如 Button_button__abc 和 Modal_modal__def）完全无关，不会互相覆盖或影响优先级。
- 真正要注意的是：不要在
.module.css文件里用@import './base.css'—— 构建工具通常忽略它，或报错，且破坏模块边界 - 如果需要复用变量，把 CSS 变量定义在全局
base.css里，然后在.module.css中用var(--color-primary)调用，这是安全的 - TS 项目记得补全类型声明：
declare module '*.module.css'，否则styles.xxx可能为undefined而无提示
最常被忽略的一点：CSS 加载顺序问题，90% 都源于混淆了「JS 模块加载顺序」和「浏览器 CSSOM 构建顺序」。前者是开发时看到的 import 行，后者才是决定样式的最终依据。盯着控制台 Elements 面板里 和 的实际位置，比看 JS 代码更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
