无法在 Laravel 应用程序中解析 Postcss-loader答案

【问题标题】：Can't resolve Postcss-loader in Laravel application无法在 Laravel 应用程序中解析 Postcss-loader
【发布时间】：2021-01-04 16:24:42
【问题描述】：

在执行以下步骤之前，一切正常。我将 laravel 与 Vue、scss 和 bootstrap 一起使用。我试图退回提交，但我仍然无法编译。

事情是这样的：

我试图让我的 Vue 风格使用 @extend 来引入引导类。代码如下：


    <style lang="scss">
    
    .checkmark{
        margin-top: -0.3rem !important;
        margin-bottom: 0.1rem !important;
        font-size: 28px;
    }
    
    .uncheck{
        @extend .text-danger;
    }
    </style>

我这样做了，但我仍然无法申请该课程。因此，我尝试在此处遵循 Vue 文档：https://vue-loader.vuejs.org/guide/pre-processors.html#sass 并运行 npm install -D sass-loader node-sass 并将推荐的代码添加到我的 webpack.mix.js。

这仍然不起作用，我继续收到一个错误，告诉我添加!optional。

所以，我在这里关注了 webpack Bootstrap 文档：https://getbootstrap.com/docs/4.5/getting-started/webpack/ 并运行：npm install --save-dev postcss-loader postcss，（我认为我不应该安装 postcss）而且我更新了我的 webpack.mix.js。

我开始收到此错误：

ERROR in ./resources/sass/welcome.scss
Module build failed (from ./node_modules/css-loader/index.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:

所以，我尝试恢复到我之前的 package.json 文件：


"devDependencies": {
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^7.0",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
},

其中一部分包括运行：npm uninstall --save-dev postcss & npm uninstall --save-dev postccs-loader

我还将我的webpack.mix.js 恢复为：


    const mix = require('laravel-mix');
    
    mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        .sass('resources/sass/welcome.scss', 'public/css');

我遇到了一个提到缓存的错误，所以我尝试运行npm cache verify

现在当我运行npm run dev 时，我收到了这个错误：


    ERROR in multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss
    Module not found: Error: Can't resolve 'postcss-loader' in 'C:\wamp64\www\equipmentFinderAssistant'
     @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss /js/app[1]
    
    ERROR in multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss
    Module not found: Error: Can't resolve 'postcss-loader' in 'C:\wamp64\www\equipmentFinderAssistant'
     @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss /js/app[2]
    
    ERROR in ./resources/js/components/ProductPreviewBar.vue
    Module not found: Error: Can't resolve 'postcss-loader' in 'C:\wamp64\www\equipmentFinderAssistant'
     @ ./resources/js/components/ProductPreviewBar.vue 4:0-78
     @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/ProductCard.vue?vue&type=script&lang=js&
     @ ./resources/js/components/ProductCard.vue?vue&type=script&lang=js&
     @ ./resources/js/components/ProductCard.vue
     @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/CategoryBox.vue?vue&type=script&lang=js&
     @ ./resources/js/components/CategoryBox.vue?vue&type=script&lang=js&
     @ ./resources/js/components/CategoryBox.vue
     @ ./resources/js/app.js
     @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/welcome.scss
    npm ERR! code ELIFECYCLE
    npm ERR! errno 2
    npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
    npm ERR! Exit status 2
    npm ERR!
    npm ERR! Failed at the @ development script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\nateg\AppData\Roaming\npm-cache\_logs\2020-09-17T16_37_51_015Z-debug.log
    npm ERR! code ELIFECYCLE
    npm ERR! errno 2
    npm ERR! @ dev: `npm run development`
    npm ERR! Exit status 2
    npm ERR!
    npm ERR! Failed at the @ dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\nateg\AppData\Roaming\npm-cache\_logs\2020-09-17T16_37_51_079Z-debug.log

【问题讨论】：

标签： laravel vue.js npm

【解决方案1】：

由于我使用的是 TailwindCss v2，因此降级不起作用。

对我有用的是将 laravel-mix 更新到 6.0 版

【讨论】：

【解决方案2】：

我在这里也有同样的问题。降级到 postcss-loader v3 才能工作（不理想，但现在可以工作）：
npm uninstall postcss-loader --save-dev
npm install postcss-loader@~3.0.0 --save-dev

来源：https://github.com/JeffreyWay/laravel-mix/issues/2471

【讨论】：