Can't resolve Postcss-loader in Laravel application

Question

Prior to doing the below steps, everything was working. I was using the laravel with Vue, scss, and bootstrap. I tried to step back in commits, but I still wasn't able to compile.

This is what happened:

I was trying to get my Vue style to use @extend to pull in a bootstrap class. Here's the code:

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

I did this and I still wasn't able to get the class to apply. So, I tried following the Vue docs here: https://vue-loader.vuejs.org/guide/pre-processors.html#sass and ran npm install -D sass-loader node-sass and added the recommended code to my webpack.mix.js.

This still didn't work, I continued to receive an error telling me to add !optional.

So, I followed the webpack Bootstrap docs here: https://getbootstrap.com/docs/4.5/getting-started/webpack/ and ran: npm install --save-dev postcss-loader postcss, (I don't think I should have installed postcss) plus I updated my webpack.mix.js.

I started to receive this error:

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:

So, I tried reverting back to my previous package.json file:

"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"
},

Part of this included running: npm uninstall --save-dev postcss & npm uninstall --save-dev postccs-loader

I also reverted my webpack.mix.js back to:

    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');

I had an error that mentioned the cache so I tried running npm cache verify

Now when I run npm run dev I receive this error:

    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

Answer 1

As I'm using TailwindCss v2 the downgrade didn't work.

What worked for me was to update laravel-mix to version 6.0

Answer 2

I have the same problem here. Downgraded to postcss-loader v3 to work (not ideal, but does the job for now):

npm uninstall postcss-loader --save-dev
npm install postcss-loader@~3.0.0 --save-dev

Source: https://github.com/JeffreyWay/laravel-mix/issues/2471