如何正确配置css-loader与style-loader，解决Webpack加载CSS文件报错问题

核心故障点为webpack配置文件加载失败，导致CSS相关loader配置未生效：

• 你的webpack.config.js中多次调用path.join()方法，但文件顶部没有引入Node.js内置的path模块，webpack在读取配置时会直接报错中断，后续的loader规则根本没有被识别，因此无法处理CSS文件。

修复步骤：

1. 修改webpack.config.js顶部的引入代码，补充path模块的引入：

// 新增path引入行
const path = require('path');
const webpack = require('webpack');

2. 可选择性优化CSS loader规则，排除node_modules目录提升编译效率：

{
  test: /\.css$/,
  exclude: /node_modules/,
  use: ["style-loader", "css-loader"]
}

3. 重新执行npm run build命令生成新的打包文件即可。

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