如何解决Webpack加载react-datetime-range-picker的CSS文件报错问题？

使用react-datetime-range-picker组件时，出现模块解析错误，提示无合适loader处理CSS文件。已安装style-loader和css-loader，且webpack.config.js中配置了相关规则，但错误仍指向node_modules中的组件style.css文件，需修复该问题。

完整错误信息 #

javascript modules 6.14 KiB 
./src/pages/Campaign/CampaignNew.js 2.39 KiB [built] 
./node_modules/react-datetime-range-picker/dist/style.css 3.75 KiB [built] [1 error] 
ERROR in ./node_modules/react-datetime-range-picker/dist/style.css 5:0 
Module parse failed: Unexpected token (5:0)  
You may need an appropriate loader to handle this file type, currently no loaders are configured
to process this file. See https://webpack.js.org/concepts#loaders   
|  */ 
|  
> .rdt {
|   position: relative; 
| }  
@ ./node_modules/react-datetime-range-picker/dist/index.js 27:0-22  
@ ./src/pages/Campaign/CampaignNew.js 3:0-62 
@ ./src/App.js 6:0-55 16:46-57  
@ ./src/index.js 1:0-24 

当前webpack.config.js配置 #

const path = require("path");
const webpack = require("webpack");
require('dotenv').config({path: './.env'});

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/app_chat/js"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.(sass|scss|css)$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env),
    }),
  ],
};

package.json依赖 #

{
  "name": "app_chat",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "axios": "^1.2.4",
    "babel-loader": "^9.1.2",
    "dotenv": "^16.0.3",
    "react": "^18.2.0",
    "react-datetime": "^3.2.0",
    "react-datetime-range-picker": "^3.0.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.7.0",
    "react-switch": "^7.0.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "devDependencies": {
    "css-loader": "^6.7.3",
    "style-loader": "^3.3.1"
  }
}

解决方案 #

问题根源 #

webpack的CSS规则中设置了exclude: /node_modules/，会忽略所有node_modules目录下的CSS文件，而react-datetime-range-picker组件的样式文件正位于该目录下，导致webpack无法找到对应的loader处理它，从而抛出解析错误。

修复方案（二选一） #

方案1：移除CSS规则的exclude配置（简单直接）

修改webpack.config.js中的CSS规则，去掉exclude: /node_modules/，让loader处理所有CSS文件（包括node_modules内的）：

{
  test: /\.(sass|scss|css)$/,
  use: ["style-loader", "css-loader"],
}

方案2：仅处理react-datetime-range-picker的CSS文件（更精准）

如果不想处理所有node_modules的CSS文件，可以修改exclude规则，排除除react-datetime-range-picker之外的node_modules内容：

{
  test: /\.(sass|scss|css)$/,
  exclude: /node_modules(?!\/react-datetime-range-picker)/,
  use: ["style-loader", "css-loader"],
}

修改后验证 #

保存webpack配置文件，重新执行构建命令（npm run dev或npm run build），错误即可消除。

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