React项目Webpack配置报错：未配置CSS Loader无法解析CSS文件

1. 安装CSS处理依赖 #

Webpack 需要专门的 loader 来处理 CSS 文件，你需要安装 css-loader 和 style-loader：

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

2. 修改 Webpack 配置文件 #

在 module.rules 数组中添加处理 .css 文件的规则，与现有 babel-loader 规则同级：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
        },
      },
      // 新增CSS处理规则
      {
        test: /\.css$/,
        // loader执行顺序从右到左：css-loader先解析CSS语法，style-loader再将样式注入DOM
        use: ['style-loader', 'css-loader']
      }
    ],
  },
};

补充说明 #

• css-loader：负责解析 CSS 中的 @import、url() 等语法，把 CSS 转换成 Webpack 可识别的模块。
• style-loader：将解析后的 CSS 通过 <style> 标签注入到页面 DOM 中，让样式生效。
• 后续如果需要处理 Less/Sass 这类预处理器，只需在 css-loader 前添加对应预处理器的 loader 即可。

内容的提问来源于stack exchange，提问作者Harry Z. Huang