Tailwindcss: resolve-url-loader cannot operate

[Sjoerd]

Hello,
as soon as I run npm run watch, I'm getting the following error:

WARNING in ./node_modules/css-loader??ref--8-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--8-4!./node_modules/sass-loader/lib/loader.js??ref--8-5!./resources/assets/sass/app.scss
(Emitted value instead of an instance of Error)   resolve-url-loader cannot operate: CSS error
  C:\Users\Gebruiker\Desktop\paste\resources\assets\sass\app.scss:22:11: missing '}'
  at error (C:\Users\Gebruiker\Desktop\paste\node_modules\css\lib\parse\index.js:62:15)
 @ ./resources/assets/sass/app.scss 4:14-266
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

Code:

webpack.mix.js:

let tailwindcss = require('tailwindcss');
let mix = require('laravel-mix');
require('laravel-mix-purgecss');

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('./tailwind.js') ],
  })
  // .purgeCss()
  .sourceMaps();

App.scss:

@tailwind preflight;
@tailwind utilities;

[Mindgamesnl]

Im not a wizzard but i think you have a , at the end of an object, afaik thats not suposed to be there

can you try this in webpack.mix.js?

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('./tailwind.js') ]
  })
  // .purgeCss()
  .sourceMaps();

[Sjoerd]

@Mindgamesnl Unfortunately, that does not solve the problem :(

[adamwathan]

Can you share a demo repo that I can clone that exhibits the issue? This should be fixed by adding processCssUrls: false so it would be helpful to have a reproduction I can use to troubleshoot.

[Sjoerd]

I've created a new laravel project, and now the problem is solved.

[ksr583]

Had this issue myself, and changed processCsUrls to false, but would love to know what the initial cause of it was.

[adamwathan]

Here's the issue: https://github.com/bholloway/resolve-url-loader/issues/28

[ahuggins]

Posting this in case it helps anyone. I received the same error message, what seemed to solve it was removing comments in the style.scss file. So now mine looks like:

@tailwind preflight;

@tailwind components;

@tailwind utilities;


body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

[ahuggins]

Also, my case was using Symfony and Encore, put the underlying webpack stuff should have been the same I think.

[simondavies]

just to add my fix to this was all I had to do was add a simple basic class to the end of the main style sheet.

@tailwind preflight;
@tailwind components;
@tailwind utilities;

.nothing {display:none;}

But i only got the error initially when using the laravel-mix-purgecss process.

[landiman]

In my case, that problem was produced because I was changing webpack.mix.js configuration... from /vendor/Foundation/... folder. When I changed the correct file, error disapeared (I noticed it because app.css generated was incliding directly @tailwind preflight; directives, instead of compiled css)

[g0d0]

just to add my fix to this was all I had to do was add a simple basic class to the end of the main style sheet.

@tailwind preflight;
@tailwind components;
@tailwind utilities;

.nothing {display:none;}

But i only got the error initially when using the laravel-mix-purgecss process.

It's solve my problem! Thanks!