React导入CSS遇Module parse failed错误，求解决方案

嘿，这个问题我太熟了！你遇到的是 Webpack 最常见的配置问题之一——Webpack 默认不认识 CSS 文件，而你的配置里完全没加处理 CSS 的 loader。你看，当前的 webpack.config.js 只配了处理 JS 文件的 babel-loader，当你在 Header 组件里导入 index.css 时，Webpack 一脸懵：“这玩意儿我不会处理啊！”，于是就抛出了那个报错。

别慌，跟着下面的步骤来，分分钟搞定：

1. 先装必需的 CSS 处理工具 #

你需要安装两个 loader：css-loader 和 style-loader，它们分工明确：

• css-loader：帮你解析 CSS 里的 @import、url() 这些语法
• style-loader：把解析好的 CSS 注入到页面的 <style> 标签里，让样式生效

打开终端，根据你的包管理器选对应的命令：

# 用 npm 的话
npm install style-loader css-loader --save-dev

# 用 yarn 的话
yarn add style-loader css-loader --dev

2. 修改 Webpack 配置文件 #

打开你的 webpack.config.js，在 module.rules 数组里，新增一条处理 .css 文件的规则，放在 JS 规则后面就行：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      // 新增这一段！处理 CSS 文件的规则
      {
        test: /\.css$/,
        // 注意顺序：Webpack 从右往左执行 loader，所以先跑 css-loader 再跑 style-loader
        use: ["style-loader", "css-loader"]
      }
    ]
  }
}

3. 重启开发服务器 #

配置改完后，一定要关掉当前正在运行的开发服务器，重新启动（比如执行 npm start 或者 webpack serve），这样新的配置才会生效。

做完这三步，你再导入 index.css 就不会报错了，页面也能正常渲染你写的导航栏样式啦！

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