在laravel-shop根目录下运行npm run dev遇到的一个错误及解决
洪宏硕
如题，在构建开源项目【GitHub - summerblue/laravel-shop: Laravel 电商实战教程的项目代码】的过程中，执行npm run dev后，遇到一个报错：
C:\Users\daniel\Downloads\laravel-shop>npm run dev
> dev
> npm run development
> development
> mix
× Mix
Compiled with some errors in 7.22s
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.url should be one of these:
boolean | object { filter? }
-> Allows to enables/disables `url()`/`image-set()` functions handling (https://github.com/webpack-contrib/css-loader#url).
Details:
* options.url should be a boolean.
* options.url should be an object:
object { filter? }
at validate (C:\Users\daniel\Downloads\laravel-shop\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
at Object.getOptions (C:\Users\daniel\Downloads\laravel-shop\node_modules\webpack\lib\NormalModule.js:585:19)
at Object.loader (C:\Users\daniel\Downloads\laravel-shop\node_modules\css-loader\dist\index.js:31:27)
at processResult (C:\Users\daniel\Downloads\laravel-shop\node_modules\webpack\lib\NormalModule.js:758:19) at C:\Users\daniel\Downloads\laravel-shop\node_modules\webpack\lib\NormalModule.js:860:5
at C:\Users\daniel\Downloads\laravel-shop\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at C:\Users\daniel\Downloads\laravel-shop\node_modules\loader-runner\lib\LoaderRunner.js:251:18
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors从内容看来，知道是css-loader版本安装的不对导致的，于是查看安装的版本：npm view css-loader version
打印出来：6.7.2
npm在安装依赖包时默认会选择最新的版本，6.7.2就是最新的版本，所以出现了不匹配，于是作版本回退后再尝试，先查看一下有哪些版本可以安装：npm view css-loader versions
C:\Users\daniel\Downloads\laravel-shop>npm view css-loader versions
[
'0.1.0', '0.1.1', '0.1.2', '0.2.0', '0.2.1', '0.2.2', '0.2.3',
'0.2.4', '0.5.0', '0.5.1', '0.5.2', '0.6.0', '0.6.1', '0.6.2',
'0.6.3', '0.6.4', '0.6.5', '0.6.6', '0.6.7', '0.6.8', '0.6.9',
'0.6.10', '0.6.11', '0.6.12', '0.7.0', '0.7.1', '0.8.0', '0.9.0',
'0.9.1', '0.10.0', '0.10.1', '0.11.0', '0.11.1', '0.11.2', '0.12.0',
'0.12.1', '0.13.0', '0.13.1', '0.14.0', '0.14.1', '0.14.2', '0.14.3',
'0.14.4', '0.14.5', '0.15.0', '0.15.1', '0.15.2', '0.15.3', '0.15.4',
'0.15.5', '0.15.6', '0.16.0', '0.17.0', '0.18.0', '0.19.0', '0.20.0',
'0.20.1', '0.20.2', '0.21.0', '0.22.0', '0.23.0', '0.23.1', '0.24.0',
'0.25.0', '0.26.0', '0.26.1', '0.26.2', '0.26.4', '0.27.0', '0.27.1',
'0.27.2', '0.27.3', '0.28.0', '0.28.1', '0.28.2', '0.28.3', '0.28.4',
'0.28.5', '0.28.6', '0.28.7', '0.28.8', '0.28.9', '0.28.10', '0.28.11',
'1.0.0', '1.0.1', '2.0.0', '2.0.1', '2.0.2', '2.1.0', '2.1.1',
'3.0.0', '3.1.0', '3.2.0', '3.2.1', '3.3.0', '3.3.1', '3.3.2',
'3.4.0', '3.4.1', '3.4.2', '3.5.0', '3.5.1', '3.5.2', '3.5.3',
'3.6.0', '4.0.0', '4.1.0', '4.1.1', '4.2.0', '4.2.1', '4.2.2',
'4.3.0', '5.0.0', '5.0.1', '5.0.2', '5.1.0', '5.1.1', '5.1.2',
'5.1.3', '5.1.4', '5.2.0', '5.2.1', '5.2.2', '5.2.3', '5.2.4',
'5.2.5', '5.2.6', '5.2.7', '6.0.0', '6.1.0', '6.2.0', '6.3.0',
'6.4.0', '6.5.0', '6.5.1', '6.6.0', '6.7.0', '6.7.1', '6.7.2'
]于是从高到低地试，结果发现5.0.0版本是可以的。安装命令：npm install css-loader@5.0.0 --save-dev
再执行npm run dev，打印出来:
C:\Users\daniel\Downloads\laravel-shop>npm run dev
> dev
> npm run development
> development
> mix
* Mix █████████████████████████ done (99%) plugins
BuildCallbackPlugin
* Mix █████████████████████████ done (99%) plugins
WebpackBar:done
√ Mix
Compiled successfully in 7.98s
Laravel Mix v6.0.13
✔ Compiled Successfully in 7549ms
┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│ File │ Size │
├────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│ /js/app.js │ 1.52 MiB │
│ css/app.css │ 263 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?98f20b9ec79b2fee02a300f4b716629f │ 134 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg?991c1c761fc31f9c3252dbfb2a22fd7a │ 730 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?330e879afe4a0abb35f235e29be3084f │ 133 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?6e63bd22128f27b83f228bf5ef541156 │ 76.6 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff?5f63cb7f47b6ea89773b43a6e687e5a5 │ 90 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?62a07ffeac77696f17ef438f49ce6790 │ 33.5 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg?f3187c7462849ed261a89dc27e7a4733 │ 141 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?ac2367644e559de4ff330fbb7c273e70 │ 33.3 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?2c154b0f8c0d8d1661627d1ddb317b12 │ 13.3 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff?ea5a41ec4a24ce93298ee053b6357e18 │ 16.4 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?6606667d9800a27eb8b5f61ccb66d510 │ 200 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?0454203f26b33fc02e2b686b317aab3d │ 896 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?915a0b79c22a1c1f64da9e0a90a12f02 │ 200 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?3eb06c702e27fb110194f5a16c45cb8e │ 78.4 KiB │
│ fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?f4f93856730733912b1e06ad64c0baf7 │ 102 KiB │
└────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully生成的文件位于：laravel-shop根目录/public/js/app.js
类似资料：