如何为React项目创建可作用于所有组件的全局CSS文件

方案可行性确认 #

完全可以实现，这是React项目不使用CSS Modules时，配置全局样式的标准实现方式。

不生效的常见原因及修复方案 #

• 路径写法错误（最高概率）
  你当前使用的绝对路径导入写法import "/css/Global.css" 大部分React脚手架默认不识别，需要改为对应入口文件的相对路径：
  举个例子，如果你的文件结构是：

  src/
  ├── css/
  │   └── Global.css
  ├── App.js
  └── index.js
  

  在App.js中导入时需要写相对路径：import "./css/Global.css"
• 脚手架/构建工具配置问题
  如果你使用的是自定义webpack配置的项目，需要确认已经安装style-loader、css-loader，且webpack配置中已添加对应.css文件的处理规则；如果是create-react-app等官方脚手架生成的项目，默认已经支持全局CSS导入，无需额外配置。
• 样式优先级被覆盖
  可以先在Global.css中加入高优先级测试代码验证是否导入成功：

  body {
    background: red !important;
  }
  

  如果页面背景变红，说明导入已经生效，只是你原来的全局样式被组件内联样式、其他更高优先级的CSS规则覆盖了，调整选择器优先级即可。
• 特殊框架限制
  如果你使用的是Next.js等基于React封装的框架，全局CSS仅允许在根入口文件（如Next.js的_app.js）中导入，在普通组件中导入会失效，将导入语句移到对应框架要求的根入口文件即可。
• 开发服务缓存问题
  修改导入语句后可以重启本地开发服务，排除热更新缓存导致的样式未加载问题。

内容的提问来源于stack exchange，提问作者CSuds