Laravel-mix: Bug with Tailwind css, SCSS and resolve-url-loader (with potential fix)

[smcyr]

• Laravel Mix Version: 4.0.14 (npm list --depth=0)
• Node Version (node -v): 10.15.0
• NPM Version (npm -v): 6.7.0
• OS: Windows 10

Description:

If I use TailwindCSS and resolve url() in SCSS, there is an error. It's even mentionned in the Tailwind docs:
https://tailwindcss.com/docs/installation/#laravel-mix

What I did to fix the error on my end is to update "resolve-url-loader" to 3.0.0 and modify the rule loaders to put "resolve-url-loader" to execute after PostCSS:

Mix.listen('configReady', (config) => {
    for (rule of config.module.rules) {
        if (new RegExp("\.scss$").test(rule.test.toString())) {
            var resolveUrlLoaderIndex = 0;
            rule.use.forEach(function (element, index) {
                if (element.loader === "resolve-url-loader") {
                    resolveUrlLoaderIndex = index;
                }
            });
            rule.use.splice(resolveUrlLoaderIndex - 1, 0, rule.use.splice(resolveUrlLoaderIndex, 1)[0]);
        }
    }
});

Without this code, I have this error:

Error: resolve-url-loader: CSS error
  predicate must return an absolute path or the result of calling next()

Steps To Reproduce:

For example, with this config:

const mix = require('laravel-mix');

mix
    .sass('assets/styles/main.scss', 'styles')
    .options({
        postCss: [
            require('tailwindcss')('./tailwind.js')
        ]
    });

Add this SCSS:

@tailwind preflight;

@tailwind components;

body {
    background-image: url('../images/bg.jpg');
}

@tailwind utilities;

[timothyasp]

Also running into this issue, and not a clear path forward without just disabling the resolve-url-loader using processCssUrls: false.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[smcyr]

This is issue has not been resolved.

[bholloway]

I'm looking at this as the maintainer of resolve-url-loader. See attached issue.

In laravel-mix I believe that loader.options.context is not being set correctly in the LoaderOptionsPlugin seen here. The __dirname is taken from the webpack example and is intended to be the project root. But in this case __dirname is deep inside /.../node_modules/laravel/mix/....

This has since been removed from master so 🤞 this should be fixed on next release.

[smcyr]

It seems to be working well with Laravel Mix 4.0.16 now!

[intellow]

This is once again broken in Laravel Mix 4.1.2. I had to downgrade to 4.0.16 to get npm run dev to work.