在Django中集成React时Webpack CSS文件解析失败的问题解决

错误原因分析 #

你碰到的Module parse failed: Unexpected token错误，核心问题在于Webpack没有配置处理纯.css文件的loader——你的webpack.config.js里只设置了.scss文件的处理规则，但App.css是纯CSS文件，Webpack不知道该怎么解析它。同时你也缺少处理CSS相关的必要依赖包。

分步解决方案 #

1. 安装必要依赖

先安装Webpack处理CSS必须的loader，再按需安装项目需要的其他依赖：

# 处理CSS的核心loader（必须）
npm install -D style-loader css-loader
# 若需要处理SCSS，保留sass-loader（需搭配sass依赖）
npm install -D sass-loader sass
# 可选：你的项目用到的其他业务/工具依赖
npm install --save axios react-router-dom react-dropzone
npm install react-bootstrap@next bootstrap@5.1.1
npm i web-vitals url-loader file-loader --save-dev

2. 更新Webpack配置文件

修改webpack.config.js，添加专门处理.css文件的规则，同时确保SCSS规则正常生效：

module.exports = {
  module: {
    rules: [
      // 处理JS/JSX文件
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: "babel-loader" 
      },
      // 处理纯CSS文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 处理SCSS文件（先编译为CSS再处理）
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

• style-loader：将解析后的CSS注入到DOM中，让样式生效
• css-loader：解析CSS文件中的@import、url()等语法
• sass-loader：把SCSS代码编译为普通CSS（需要依赖sass包）

3. 重新构建项目

执行你的Webpack构建命令（比如npx webpack --mode development），此时Webpack就能正常解析App.css文件，之前的错误会消失。

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