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

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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 25 (6 by maintainers)

Commits related to this issue

Merge pull request #48 from James-ONeill/master Add new Laravel JS structure to the PurgeCSS docs — committed to DCzajkowski/tailwindcss by adamwathan 6 years ago

Most upvoted comments

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:

https://github.com/bholloway/resolve-url-loader/issues/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:

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

+14

adamwathan on Nov 2, 2017

I’ve heard this is a good idea! 😄

adamwathan on Nov 2, 2017

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

ahey on Feb 17, 2019

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

adamwathan on Nov 2, 2017

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

thestepafter on Nov 2, 2017

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”

alicompu on Apr 24, 2020

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.

vintprox on Apr 25, 2019

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

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

leevigraham on Jan 10, 2018

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

scottzirkel on Nov 2, 2017