Webpack中CSS Loader失效，集成react-date-range导入CSS报错求助

我来帮你搞定这个问题！从报错信息和你的Webpack配置来看，问题出在你当前的CSS Loader规则没有覆盖node_modules目录下的文件——react-date-range的CSS文件在node_modules里，但你的配置里所有处理.css的规则要么只包含config.srcDir，要么限定了styles子目录，导致Webpack找不到合适的loader来解析这些第三方CSS文件。

解决方案：新增处理第三方库CSS的Loader规则 #

你需要在Webpack的module.rules里添加一条专门处理node_modules中CSS文件的规则，因为第三方库的CSS通常不需要启用CSS Modules，直接用基础的loader解析即可。

修改你的Webpack配置，在module.rules中加入以下规则（建议放在全局样式规则之后、字体/图片规则之前）：

// 处理node_modules中的第三方CSS文件
{
  test: /\.css$/,
  use: [
    ExtractCssChunks.loader, // 和你全局样式用的提取器保持一致
    'css-loader',
    'postcss-loader'
  ],
  include: /node_modules/
}

为什么这么改？ #

• 这条规则专门匹配node_modules目录下的.css文件，刚好覆盖react-date-range的样式文件
• 第三方库的CSS不需要开启CSS Modules，所以不用设置modules: true
• 保持和你全局样式一样使用ExtractCssChunks.loader，确保样式提取逻辑一致（如果你在开发环境想直接用style-loader注入到页面，也可以替换成style-loader）

修改后的关键部分示例 #

module: {
  rules: [
    // ... 原有的js、模块化样式、全局样式规则保持不变
    // 新增：处理node_modules中的第三方CSS文件
    {
      test: /\.css$/,
      use: [
        ExtractCssChunks.loader,
        'css-loader',
        'postcss-loader'
      ],
      include: /node_modules/
    },
    // 原有的字体、图片等资源文件规则保持不变
    {
      test: /\.(ttf|eot|woff|woff2)$/,
      loader: "file-loader",
      options: {
        name: "fonts/[name].[ext]",
      }
    },
    // ... 其他资源规则
  ]
}

修改完配置后重启Webpack Dev Server，应该就能正常解析react-date-range的CSS文件了。

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