在laravel-shop根目录下运行npm run dev遇到的一个错误及解决

qiuchangyong

已于 2022-11-26 22:38:56 修改

阅读量1k

点赞数

分类专栏：代码/脚本/命令行/可执行文件文章标签： laravel php css-loader webpack mix

于 2022-11-26 22:32:03 首次发布

本文链接：https://blog.csdn.net/qiuchangyong/article/details/128058077

版权

代码/脚本/命令行/可执行文件专栏收录该内容

91 篇文章 2 订阅

订阅专栏

在构建GitHub上的Laravel电商实战项目时，遇到npm run dev命令执行后的CSS模块构建错误。错误源于css-loader的最新版本6.7.2与项目不兼容。通过查看可用版本并回退至5.0.0版本后，成功解决了问题，使项目能正常编译并生成所需文件。

摘要由CSDN通过智能技术生成

如题，在构建开源项目【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