resolve-url-loader cannot operate: CSS error when using @apply

[thestepafter]

I put the following in my .scss file:

.btn {
  @apply .font-bold .py-2 .px-4 .rounded;
}
.btn-blue {
  @apply .bg-blue .text-white;
}
.btn-blue:hover {
  @apply .bg-blue-dark;
}

and after running webpack I can use the classes but I get the following error at the end of the build process:

WARNING in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[{"version":"6.0.13","plugins":[null,null,null,null,null,null,null,null,null],"postcssPlugin":"tailwind","postcssVersion":"6.0.13"},null,null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","includePaths":["./node_modules/foundation-sites/scss/","./node_modules/font-awesome/scss/","./node_modules/motion-ui/","./node_modules/video.js/src/css/"],"sourceMap":true}!./sass/styles.scss
(Emitted value instead of an instance of Error) resolve-url-loader cannot operate: CSS error
/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/sass/styles.scss:6698:3: missing '}'
at error (/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/node_modules/css/lib/parse/index.js:62:15)
@ ./sass/styles.scss 4:14-245
@ multi ./node_modules/jquery/dist/jquery.min.js ./node_modules/what-input/dist/what-input.min.js ./node_modules/foundation-sites/dist/js/foundation.min.js ./node_modules/motion-ui/motion-ui.js ./node_modules/video.js/dist/video.min.js ./sass/styles.scss

When I remove @apply the build process completes without error.

[thestepafter]

The same error occurs if I use @responsive.

[thestepafter]

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.

[thestepafter]

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.

[adamwathan]

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!

[thestepafter]

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

[scottzirkel]

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.

[adamwathan]

@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 🤔

[scottzirkel]

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.

[adamwathan]

@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!

[scottzirkel]

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

[adamwathan]

I've heard this is a good idea! 😄

[macmartine]

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

[adamwathan]

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

[macmartine]

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

[adamwathan]

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 🤔

[leevigraham]

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

I'll see if I can debug the issue.

[leevigraham]

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

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

[jarod51]

@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 :)

[kevinjbayer]

@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.

[kevinjbayer]

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

[ahey]

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

[vintprox]

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.

[AbdelElrafa]

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.

[alicompu]

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"

[seyfer]

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?