title: Can't resolve Postcss-loader in Laravel application
body: <p>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.</p>
  <p>This is what happened:</p>
  <p>I was trying to get my Vue style to use <code>@extend</code> to pull in a bootstrap class. Here's the code:</p>
  <pre><code>
      &lt;style lang=&quot;scss&quot;&gt;
      
      .checkmark{
          margin-top: -0.3rem !important;
          margin-bottom: 0.1rem !important;
          font-size: 28px;
      }
      
      .uncheck{
          @extend .text-danger;
      }
      &lt;/style&gt;
  
  </code></pre>
  <p>I did this and I still wasn't able to get the class to apply. So, I tried following the Vue docs here: <a href="https://vue-loader.vuejs.org/guide/pre-processors.html#sass" rel="nofollow noreferrer">https://vue-loader.vuejs.org/guide/pre-processors.html#sass</a> and ran <code>npm install -D sass-loader node-sass</code> and added the recommended code to my <code>webpack.mix.js</code>.</p>
  <p>This still didn't work, I continued to receive an error telling me to add <code>!optional</code>.</p>
  <p>So, I followed the webpack Bootstrap docs here: <a href="https://getbootstrap.com/docs/4.5/getting-started/webpack/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.5/getting-started/webpack/</a> and ran: <code>npm install --save-dev postcss-loader postcss</code>, (I don't think I should have installed <code>postcss</code>) plus I updated my <code>webpack.mix.js</code>.</p>
  <p>I started to receive this error:</p>
  <pre><code>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:
  </code></pre>
  <p>So, I tried reverting back to my previous <code>package.json</code> file:</p>
  <pre><code>
  &quot;devDependencies&quot;: {
      &quot;axios&quot;: &quot;^0.19&quot;,
      &quot;bootstrap&quot;: &quot;^4.0.0&quot;,
      &quot;cross-env&quot;: &quot;^7.0&quot;,
      &quot;jquery&quot;: &quot;^3.2&quot;,
      &quot;laravel-mix&quot;: &quot;^5.0.1&quot;,
      &quot;lodash&quot;: &quot;^4.17.19&quot;,
      &quot;popper.js&quot;: &quot;^1.12&quot;,
      &quot;resolve-url-loader&quot;: &quot;^2.3.1&quot;,
      &quot;sass&quot;: &quot;^1.20.1&quot;,
      &quot;sass-loader&quot;: &quot;^8.0.0&quot;,
      &quot;vue&quot;: &quot;^2.5.17&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.10&quot;
  },
  
  </code></pre>
  <p>Part of this included running: <code>npm uninstall --save-dev postcss</code> &amp; <code>npm uninstall --save-dev postccs-loader</code></p>
  <p>I also reverted my <code>webpack.mix.js</code> back to:</p>
  <pre><code>
      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');
  
  </code></pre>
  <p>I had an error that mentioned the cache so I tried running <code>npm cache verify</code></p>
  <p>Now when I run <code>npm run dev</code> I receive this error:</p>
  <pre><code>
      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&amp;type=script&amp;lang=js&amp;
       @ ./resources/js/components/ProductCard.vue?vue&amp;type=script&amp;lang=js&amp;
       @ ./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&amp;type=script&amp;lang=js&amp;
       @ ./resources/js/components/CategoryBox.vue?vue&amp;type=script&amp;lang=js&amp;
       @ ./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
  
  </code></pre>