title: Setup Laravel Mix with SASS and PostCSS critical CSS splitting
body: <p>I want to setup Laravel Mix with mix.sass AND PostCss Critical CSS splitting. In the end I want two files: app.css and app-critical.css.</p>
  
  <p>Unfortunately I can get this to work. One of the setups (webpack.mix.js) I did try:</p>
  
  <pre>
      mix
          .js('templates/src/js/app.js', 'web/assets/dist/')
          .js('templates/src/js/home.js', 'web/assets/dist/')
          .extract(['vue','axios','lazysizes','svgxuse', 'fontfaceobserver'], 'web/assets/dist/vendor.js')
          .sass('templates/src/scss/app.scss', 'web/assets/dist/')
          .sourceMaps()
          .options({
              postCss: [
                  require('postcss-critical-css')({
                      preserve: false,
                      minify: false
                  })
              ]
          })
          .browserSync({
              proxy: '127.0.0.1:8080',
              files: [
              'templates/**/*.twig',
              'templates/src/js/**/*',
              'templates/src/scss/**/*'
          ]
      });
  
      if (mix.inProduction()) {
          console.log("In production");
          mix.version();
      }
  </pre>
  
  <p>When I run the script via 'npm run watch' I get an error: </p>
  
  <pre>10% building modules 0/1 modules 1 active ...ign-tools/templates/src/scss/app.scssWithout `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.</pre>
  
  <p>Also, my file is just copying over all the critical styling. The file grows bigger and bigger, expanding the duplicate code everytime the input SCSS/CSS-file changes.</p>
  
  <p>I did try to set up Laravel Mix + mix.sass + one of the following plugins:</p>
  
  <ul>
  <li><a href="https://github.com/zgreen/postcss-critical-css" rel="nofollow noreferrer">https://github.com/zgreen/postcss-critical-css</a></li>
  <li><a href="https://www.npmjs.com/package/postcss-critical-split" rel="nofollow noreferrer">https://www.npmjs.com/package/postcss-critical-split</a></li>
  </ul>
  
  <p>Without success :(
  Anybody with a working setup or link to an example repository?</p>
  
  <p>Thanks,
  Teun</p>