在React中如何编辑或导入CSS？CSS加载失败该如何解决？

失效原因 #

你使用的是CSS Modules的导入语法，但当前React项目的默认配置不会把普通.css文件识别为CSS Modules模块，因此你拿到的classes对象为空，classes.Content是undefined，DOM元素没有被添加上对应的CSS类，样式自然无法生效。

解决方案 #

二选一即可：

• 方案1：继续使用CSS Modules
  1. 将Layout.css重命名为Layout.module.css（这是React官方脚手架默认识别的CSS Modules文件后缀）
  2. 修改Layout.js中的导入语句为import classes from './Layout.module.css'
     其余代码无需改动即可正常生效。
• 方案2：使用全局CSS导入
  不需要修改CSS文件名，直接修改Layout.js的两处代码：
  1. 导入语句改为import './Layout.css'
  2. main标签的className属性改为字符串形式：<main className="Content">{props.children}</main>

额外排查点 #

如果你是自行配置webpack的项目而非使用Create React App/Vite等官方脚手架生成的项目，需要确认css-loader配置中已经开启了modules支持。

内容的提问来源于stack exchange，提问作者Miloš Milutinov