Laravel-mix: [6.*] Error with sass + postcss and tailwind

[smcyr]

• Laravel Mix Version: 6.0.0-beta10
• Node Version (node -v): 12.18.1
• NPM Version (npm -v): 6.14.8
• OS: Windows 10

Description:

With this config:

const mix = require('laravel-mix');
require('dotenv').config();

const srcPath = 'assets';
const publicPath = 'web/dist';

mix
  .setPublicPath(publicPath)
  .js(srcPath + '/scripts/main.js', 'scripts')
  .sass(srcPath + '/styles/main.scss', 'styles')
  .options({
    postCss: [
      require('tailwindcss')('./tailwind.config.js')
    ]
  })
  .extract()
  .version();

With mix, I get this error:

error  in ./assets/styles/main.scss
Error: file://C:\Projects\craft-cms-3\assets\styles\main.scss:3:21: missing '{'

Here is the main.scss:

@tailwind base;

@tailwind components;

// Import custom components here

@tailwind utilities;

[smcyr]

If I add postcss with npm install postcss --save-dev and I add this config to webpack.mix.js, it fix the error:

Mix.listen('configReady', webpackConfig => {
  webpackConfig.module.rules.forEach(rule => {
    if (Array.isArray(rule.use)) {
      rule.use.forEach(ruleUse => {
        if (ruleUse.loader === 'resolve-url-loader') {
          ruleUse.options.engine = 'postcss';
        }
      });
    }
  });
});

So, I think that you should use the engine postcss for resolve-url-loader and give some warning that postcss is not installed.
Thanks

[thecrypticace]

Yep there's some oddities around postcss. I'll be looking into these soon. The note about resolve-url-loader is super helpful too, thanks!