在index.js中import全局css可行，但需确保构建工具配置支持css加载，且避免与css modules等隔离方案冲突、引入顺序错乱、loader缺失或ui库重置样式覆盖等问题。
直接在 index.js 中 import 全局 CSS 是可行的，但必须确保 Webpack（或 Vite）配置允许处理 CSS 文件，且样式加载顺序不会被后续动态样式覆盖。
为什么 index.js 里 import './index.css' 有时不生效
常见现象：页面没变、开发者工具里看不到规则、或者只在部分组件生效。根本原因不是“不能引”，而是加载时机和作用域干扰：
- 如果用了
CSS Modules或styled-components等方案，它们默认隔离样式，全局 CSS 需显式脱离作用域 - 多个
import顺序错乱（比如reset.css在main.css之后引入），导致重置失效 - Vite 默认支持 CSS 引入，但 Create React App（CRA）2.x+ 也支持；若用自定义 Webpack 配置，却漏了
css-loader或style-loader，就会报Module parse failed: Unexpected token - 某些 UI 库（如 Ant Design）自带 reset，会和你引入的
normalize.css冲突，表现为字体、间距异常
React 18 + CRA 或 Vite 下的标准写法
以主流脚手架为例，无需改配置即可工作：
- 在
src/index.js顶部紧贴import React from 'react'后，写：import './index.css';
-
index.css路径必须相对于index.js，不能写成import 'src/index.css'（Node 模块解析不认这种绝对路径） - 若需兼容 IE，避免在
index.css中使用:where()、clamp()等新语法，否则整张表可能被浏览器丢弃 - 不要在
index.css里写.App { color: red }这类组件级选择器——它虽能生效，但违背“全局样式只管重置/基础变量”的原则，后期难维护
和 index.html 中 <link> 的区别在哪
两者都能加载全局 CSS，但行为不同：
-
<link rel="stylesheet">是并行加载、阻塞 HTML 解析，适合 CDN 上的字体或第三方 CSS；而import是 JS 打包链一环，受 chunk 分割、code-splitting 影响 - 通过
import加载的 CSS，在 HMR（热更新）时能触发样式重载；<link>修改后需手动刷新 - 如果项目启用了 CSS 提取（如
MiniCssExtractPlugin），import会生成独立.css文件并插入；否则会内联为<style></style>标签——这点会影响首屏渲染性能，尤其是大文件
真正容易被忽略的是：全局 CSS 的优先级依赖于引入顺序，而不是文件位置。哪怕你把 base.css 放在 index.js 第一行，只要某个组件里 import './Button.module.css' 并写了 button { padding: 12px }，它就可能覆盖全局的 button { padding: 8px } —— 因为 CSS 特异性（specificity）和源码顺序共同起效，不是“先到先得”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
