应通过 import 显式引入 CSS 文件，而非 HTML 标签或 DOM 操作；Vue/React 中需遵循模块化加载规则，启用 CSS Modules 时注意命名转换与作用域限制，并严格控制全局样式加载顺序。
在 Vue/React 项目中如何正确 import CSS 文件
框架项目里直接写 或用 document.createElement('link') 加载 CSS 是反模式的，破坏模块化和构建流程。现代打包器（如 Webpack、Vite）要求 CSS 通过 import 声明依赖关系，才能参与 HMR、作用域处理、提取逻辑等。
- Vue 单文件组件中，
标签内容默认走vue-style-loader + css-loader流程；外部 CSS 需显式import './index.css'（推荐放在main.js或布局组件顶部） - React 中必须用
import './Button.css'，不能靠 HTML 模板引入；否则 CSS 不会随组件卸载而移除，且无法启用 CSS Modules - Vite 项目中，
import的 CSS 会被自动注入标签，但若使用?inline（如import css from './foo.css?inline'），则返回字符串，需手动插入，慎用
CSS Modules 在框架中的启用与注意事项
CSS Modules 不是浏览器原生特性，而是构建时将类名哈希化的转换过程，必须由 loader 显式开启。它解决的是全局污染问题，但也会带来调试和动态类名拼接的麻烦。
- Vue：在
中启用，编译后类名变成Foo__button__abc123，需通过defineProps或useSlots配合:class使用 - React：文件名必须含
.module.css（如Button.module.css），然后import styles from './Button.module.css'；styles.button才是真实类名 - 注意：CSS Modules 默认不支持
@import外部文件，也不支持:global(.xxx)写法跨模块穿透，容易误以为能继承父样式，实际无效
全局样式、重置样式和第三方 UI 库的加载顺序
顺序决定优先级。CSS 是从上到下解析的，后面规则覆盖前面同权重规则。框架项目中，这个顺序常被忽略，导致重置失效或主题被覆盖。
- 典型安全顺序：
reset.css→variables.css（CSS 自定义属性）→base.css（通用组件基础样式）→App.css（应用级样式）→ 第三方库（如ant-design/dist/reset.css）→ 组件内import - Ant Design / Element Plus 等库建议按文档用
babel-plugin-import或unplugin-vue-components按需导入样式，避免全量import 'ant-design-vue/dist/reset.css'导致体积暴增 - 若用 Tailwind，务必确保
@tailwind base在最前，@tailwind components居中，@tailwind utilities在最后，否则自定义@layer可能不生效
动态切换主题时 CSS 变量与 style 标签的取舍
纯 CSS 变量方案轻量、可继承、支持 transition，但无法实现完全隔离的主题包（比如深色模式下整套字体、阴影、边框规则替换）。直接操作 标签更灵活，但也更易出错。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：用
:root定义所有主题变量（--color-bg: #fff），再通过 JS 切换document.documentElement.setAttribute('data-theme', 'dark')，配合 CSS 中的[data-theme="dark"] { --color-bg: #1a1a1a; } - 避免用 JS 动态创建
标签注入整套 CSS 规则——这会导致 SSR 不一致、HMR 失效、DevTools 难以调试 - 如果必须加载远程主题 CSS（如用户上传的主题包），用
fetch获取文本后调用new CSSStyleSheet().replace(text)，再document.adoptedStyleSheets = [...]，比innerHTML更可控
/* 示例：主题切换的 CSS 写法 */
:root {
--color-primary: #1890ff;
}
[data-theme="dark"] {
--color-primary: #40a9ff;
}
button {
background-color: var(--color-primary);
}真正难的不是“怎么加”，而是“加在哪”和“加完谁管它”。很多样式问题最终都回溯到 import 位置、loader 配置层级、以及是否假设了某段 CSS 已经存在——而它其实根本没被构建进 bundle。
