webpack环境下React组件引入CSS不生效报错如何解决

核心报错原因 #

webpack运行时没有加载到包含CSS处理规则的配置，无法解析.css文件的样式语法，才抛出"需要合适loader处理该文件类型"的错误，常见诱因有以下几种：

• 修改webpack配置后没有重启webpack监听进程，webpack仍在使用旧配置运行
• webpack.config.js文件存放位置错误，运行webpack时没有读取到你编写的配置文件，使用了默认无CSS处理规则的配置
• 操作系统隐藏了文件扩展名，你的样式文件实际后缀不是.css，无法匹配到配置的处理规则
• 依赖安装不完全，style-loader或css-loader存在文件缺失

具体解决步骤 #

1. 重启webpack进程
   当前你使用的npm run react-dev是webpack监听模式，修改配置后不会自动重载，先按Ctrl + C终止当前运行的webpack进程，再重新执行npm run react-dev，绝大多数这类配置类问题都可以通过这一步解决。
2. 验证配置文件路径
   确保webpack.config.js存放在项目根目录（和package.json同级的文件夹），你也可以修改package.json中的scripts配置，强制指定webpack读取你的配置文件：

"react-dev": "webpack -w --config webpack.config.js"

3. 检查文件后缀
   开启系统的文件扩展名显示功能，确认client/src/related_items/styles/目录下的文件确实名为Card.css，不是误存为Card.css.txt等其他后缀。
4. 调整webpack配置（可选）
   你可以给CSS处理规则加上路径限制，明确匹配范围，避免规则匹配异常：
   修改webpack.config.js中的CSS规则为：

{
  test: /\.css$/,
  include: SRC_DIR,
  exclude: /node_modules/,
  use: [
    'style-loader',
    'css-loader'
  ]
}

5. 重装依赖（可选）
   如果以上步骤都无效，执行以下命令重装CSS相关loader，避免依赖损坏：

npm install --save-dev style-loader css-loader

重装完成后再重启webpack进程即可。

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