React项目引入CSS报错：无法解析style-loader 求助

这个报错其实很直白——Webpack找不到style-loader模块，原因很简单：你已经在配置文件里声明要使用它，但还没把这个依赖安装到项目里。别担心，几步就能搞定：

第一步：安装缺失的loader依赖 #

打开终端，在你的项目根目录下运行以下命令，把style-loader和css-loader都安装为开发依赖（因为它们只是构建时需要的工具）：

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

如果你用Yarn的话，就换成：

yarn add style-loader css-loader --dev

第二步：确认Webpack配置的完整性 #

你的现有配置框架是对的，但可以补全resolve部分，确保Webpack能正确识别.css扩展名的文件：

module: { 
  rules: [ 
    { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, include: __dirname }, 
    { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } 
  ] 
},
resolve: {
  extensions: ['.js', '.css'] // 添加.css，这样导入时可以省略后缀名
}

第三步：重启构建服务 #

安装完成后，一定要重启你的Webpack开发服务器或者重新执行构建命令，这样新安装的loader才能被Webpack加载并生效。

额外排查点（如果还是报错的话） #

• 打开项目根目录的package.json，检查devDependencies里是否有style-loader和css-loader，确认安装成功
• 查看node_modules文件夹，确认这两个包已经存在
• 确保你运行Webpack时指定的是正确的配置文件（如果配置文件不是默认名的话，需要用--config参数指定）

内容的提问来源于stack exchange，提问作者S.M_Emamian