resolve-url-loader cannot operate: CSS error when using @apply about tailwindcss HOT 25 CLOSED

Hey @thestepafter! This is unfortunately a known issue with resolve-url-loader due to one of its dependencies falling over with CSS it doesn't understand, even if it's parseable:

bholloway/resolve-url-loader#28

It looks like there are plans to remove the dependency that is causing that issue, but in the mean time, there's two options for working around it:

1. Disable CSS url() rewrites in Mix which will disable that plugin:

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

   This will disable that feature of course as well which is a bit of a bummer, but personally I've never even used it.

2. Use the .standaloneSass option (also aliased as .fastSass) instead of the normal .sass compilation. This disables all fancy Webpack Sass features and just processes your Sass files in the most boring way possible:

   // mix.fastSass('resources/assets/sass/app.scss', 'public/css')
   //   .options({
   //    postCss: [ tailwindcss('path/to/config.js') ],
   // });

   This will also bypass that plugin, as well as a bunch of other stuff that you might not need. Your stuff will compile way faster too 👍

EDIT: Scratch option two, it doesn't run your CSS through PostCSS at all when compiling Sass that way. Stick with option 1!

Let me know if that solves your issue!

from tailwindcss.

I've heard this is a good idea! 😄

from tailwindcss.

I was able to resolve this error by upgrading to version 3 of resolve-url-loader.

from tailwindcss.

Awesome, thank you so much for prompt reply Adam! I added processCssUrls: false, to my options and that resolved the issue.

from tailwindcss.

@scottzirkel What does your import look like? This may not be your problem but worth mentioning in case it is; Sass won't process CSS imports, only Sass imports.

For example, Sass will not actually inline this import because it's a CSS file and @import is totally valid regular CSS:

@import "path/to/some/styles.css";

You can get around that by leaving off the .css extension though:

@import "path/to/some/styles";

If that's not your problem though then that's an annoying issue for sure 🤔

from tailwindcss.

You know, if you write tests before you code it really helps. 😉

from tailwindcss.

For Webpack Encore this can be resolved by setting resolveUrlLoader to false in the enableSassLoader call

.enableSassLoader(function (sassOptions) {}, {
  resolveUrlLoader: false
})

from tailwindcss.

I was able to resolve this error by upgrading to version 3 of resolve-url-loader.

You are life-saver! :) It solves everything about this error. I had 2nd version because of Laravel 5.8 initial
dependencies. Luckily changing major version of resolve-url-loader doesn't seem to break something there.

from tailwindcss.

I was able to resolve this error by upgrading to version top: "resolve-url-loader": "^3.1.1"
and "sass": "^1.26.5" and "sass-loader": "^8.0.2"

from tailwindcss.

The same error occurs if I use @responsive.

from tailwindcss.

If I put the @apply and @responsive code in a .css file and import into the SCSS file then I don't get the error anymore.

from tailwindcss.

I spoke too soon, putting the code in an external .css works for @responsive but @apply throws an error saying the class doesn't exist.

from tailwindcss.

While option 1 worked great, option 2 simply copied over the import statement from the sass file into the css, vs actually doing anything with it.

from tailwindcss.

Oh, i mean the @tailwind preflight and @tailwind utilities were just copied over. No imports or compiling were done at all. And those were the only thing I had in my app.scss file.

from tailwindcss.

@scottzirkel ah you're totally right! standaloneSass doesn't do any PostCSS stuff at all, so that option is a no go. Updated my original comment!

from tailwindcss.

How might one resolve this outside of Laravel? I'm in Rails and hitting the same warning.

from tailwindcss.

@macmartine What's your build setup look like? Are you using the new Rails Webpacker thing?

from tailwindcss.

@adamwathan Yes, exactly, the webpacker gem. I followed the steps described by @jasoncharnes here: tailwindlabs/discuss#4

from tailwindcss.

Unfortunately looking through the commit history there it looks like this is hard-coded into Webpacker and can't be disabled the same way:

https://github.com/rails/webpacker/blob/master/package/rules/css.js#L24

I'm not sure if Webpacker lets you add custom loaders or tweak these options after the fact in anyway 🤔

from tailwindcss.

Similar issue using Symfony Encore (webpack). https://github.com/symfony/webpack-encore.

I'll see if I can debug the issue.

from tailwindcss.

@leevigraham thank you, that's what i was looking for ! Except for me it's resolve_url_loader and not resolveUrlLoader that works. Thanx again :)

from tailwindcss.

@macmartine did you ever get this to work inside of Rails without throwing this warning? It was still compiling for me, so I didn't think it'd be that big of an issue, but it appears Heroku is rejecting the build because of it.

from tailwindcss.

If any other Rails people find this, I was able to resolve it, see here: rails/webpacker#1570

from tailwindcss.

Just wanted to check if there was any update on this? I am using resolve-url-loader v3.1.0 and the issue still exists in that version.

from tailwindcss.

I was able to resolve this error by upgrading to version 3 of resolve-url-loader.

it does not help. in v2 it shows a warning and at least build succeeds. in v3 it fails completely with an error on the build.
and I cannot set processCssUrls to false as then these Fonts definitions are not working

@font-face {
    font-family: Museo;
    src: url("../fonts/museo/MuseoSansRounded-700.otf") format("opentype"),
        url("../fonts/museo/MuseoSansRounded-700.woff") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

I also cannot upgrade "sass-loader": "^8.0.2" , have to stick with 7.1 because of this issue
laravel-mix/laravel-mix#2206

any ideas?

from tailwindcss.