Webpack 4报错Can't resolve 'style-loader'，该如何解决？

API 探路者

2026-5-29

问题分析与解决方案

问题背景

在某BooksProject项目中执行构建命令时，Webpack运行后抛出9个Module not found: Error: Can't resolve 'style-loader'错误，同时还有一条关于mode选项未设置的警告。相关配置和依赖信息如下：

项目脚本配置

"scripts": { "dev": "concurrently -r --kill-others-on-fail \"yarn server\" \"yarn client\"" }

Webpack错误示例

./client/src/index.js 11:0 error Module not found: Error: Can't resolve 'style-loader' in 'D:\Zona Downloads\ITVDN NodeJS\materials\books'
....
./client/src/router.js 0:0 error Module not found: Error: Can't resolve 'style-loader' in 'D:\Zona Downloads\ITVDN NodeJS\materials\books'

Webpack警告

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

.babelrc配置

{ "presets": ["es2015", "react"] }

开发依赖（devDependencies）

{ "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "concurrently": "^3.5.1", "css-loader": "^0.28.11", "html-webpack-plugin": "^3.2.0", "react-hot-loader": "^4.0.0", "redux-devtools": "^3.4.1", "style-loader": "^0.21.0", "webpack": "^4.10.2", "webpack-cli": "^2.1.4", "webpack-command": "^0.2.0", "webpack-config": "^7.5.0", "webpack-dev-middleware": "^3.1.3", "webpack-hot-middleware": "^2.22.2" }

解决方案

一、解决`style-loader`找不到的问题

虽然你的devDependencies里已经声明了style-loader，但还是出现找不到的错误，按以下顺序排查解决：

重新安装依赖，确保包正确安装
依赖安装可能因网络、缓存问题失败，导致包缺失。执行以下步骤：
- 删除node_modules文件夹和yarn.lock文件（Windows系统用rmdir /s node_modules和del yarn.lock）
- 重新安装依赖：
```
yarn install
```

检查Webpack配置中的CSS loader规则
确认webpack.config.js里正确配置了CSS文件的loader规则，且顺序正确（Webpack loader从右到左执行，style-loader要放在css-loader前面）：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      // 处理JS/JSX的babel loader规则...
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

移除项目路径中的空格或特殊字符
你的项目路径包含空格，可能导致Webpack解析路径出错。建议把项目移动到无空格、无特殊字符的路径下，比如D:\ITVDN_NodeJS\materials\books。

二、解决`mode`选项未设置的警告

Webpack 4+要求必须设置mode选项，启用对应环境的默认配置，有两种解决方式：

在Webpack配置文件中添加mode
直接在webpack.config.js里指定mode：

module.exports = {
  mode: 'development', // 开发环境用这个，生产环境换成'production'
  // 其他配置...
}

在脚本命令中指定mode
修改package.json的scripts，在webpack相关命令后加上--mode参数。比如如果你的client脚本是启动webpack-dev-server，可改成：

"scripts": {
  "dev": "concurrently -r --kill-others-on-fail \"yarn server\" \"yarn client\"",
  "client": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
}

内容的提问来源于stack exchange，提问作者袙懈泻褌芯褉袧邪褍屑懈泻