使用 npm 在引导程序中进行 Web 开发时遇到错误答案

【问题标题】：Encountered error Webdevelopment in bootstrap using npm使用 npm 在引导程序中进行 Web 开发时遇到错误
【发布时间】：2020-12-07 15:31:02
【问题描述】：

我正在关注关于 web 开发的 freeCodeCamp 视频教程 https://youtu.be/RyTRgQ7k6QE

我完全按照它，但似乎无法克服这个错误：

PS C:\Admin-Dashboard> npx webpack --config webpack.config.js
[webpack-cli] Compilation finished
assets by status 170 KiB [cached] 1 asset
runtime modules 1.13 KiB 5 modules
orphan modules 1 bytes [orphan] 1 module
cacheable modules 508 KiB
  modules by path ./node_modules/ 508 KiB
    ./node_modules/bootstrap/dist/js/bootstrap.js 140 KiB [built] [code generated]
    ./node_modules/jquery/dist/jquery.js 281 KiB [built] [code generated]
    ./node_modules/popper.js/dist/esm/popper.js 86.4 KiB [built] [code generated]
  modules by path ./src/ 107 bytes
    ./src/js/app.js 68 bytes [built] [code generated]
    ./src/sass/main.scss 39 bytes [built] [code generated] [1 error]

ERROR in ./src/sass/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap? }
    at validate (C:\Admin-Dashboard\node_modules\schema-utils\dist\validate.js:104:11)
    at Object.loader (C:\Admin-Dashboard\node_modules\postcss-loader\dist\index.js:43:29)
    at processResult (C:\Admin-Dashboard\node_modules\webpack\lib\NormalModule.js:576:19)
    at C:\Admin-Dashboard\node_modules\webpack\lib\NormalModule.js:669:5
    at C:\Admin-Dashboard\node_modules\loader-runner\lib\LoaderRunner.js:397:11
    at C:\Admin-Dashboard\node_modules\loader-runner\lib\LoaderRunner.js:252:18
 @ ./src/js/app.js 2:0-27

1 ERROR in child compilations
webpack 5.0.0 compiled with 2 errors in 7390 ms

任何帮助将不胜感激。

【问题讨论】：

PostCSS 加载器已使用与 API 架构不匹配的选项对象进行了初始化。 - options 有一个未知的属性'plugins' 那是你的错误。您的postcss-loader 配置错误。将您当前的 postcss-loader 配置替换为他们的 docs

标签： javascript css npm webpack

【解决方案1】：

尝试卸载现有的 postcss-loader 并降级到 3.0.0

npm 卸载 postcss-loader

npm install postcss-loader@3.0.0

【讨论】：

【解决方案2】：

耶！ webpack编译成功！降级 postcss-loader 会产生更多的依赖兼容性错误。

Reyno 正确指出 postcss-loader 没有正确配置，我从这个链接配置了 postcss-loader： https://github.com/webpack-contrib/postcss-loader 雷诺在他的回答中对此发表了评论。谢谢大家的帮助！

【讨论】：