Tailwind + SCSS: resolve-url-loader: error processing CSS, invalid mapping
Aron Schüler Published
I recently started using more and more tailwind in my projects. It’s pretty cool.
But I don’t want my elements to use many many classes, which is why I started to move the tailwind classes into a .scss file and use @apply directives there.
This is were an error showed up, which I am now going to show you how to fix.
Once again, TLDR: Move your tailwind one-off definitions like max-w-[500px] away from line endings, e.g.
@apply mt-5 max-w-[500px];
should be
@apply max-w-[500px] mt-5;
What caused the error?
The error is caused somewhere along your buildchain, where a plugin handling css files gets in touch with your crazy tailwind notation and its brackets. The plugin interprets the brackets as a mapping for an url and tries to resolve it, but fails doing so. It has been discussed in the tailwind github repo. A similar failure to resolve urls is discussed in this github issue.
How do I fix the error?
You have to look at the files given by the error and check, if you have a @apply foo-[500px]; line (where foo and 500px are placeholders for anything you used) somewhere. This line needs to be rewritten.
If its just a single directive like @apply max-w-[500px]; rewrite it as plain css, like max-width: 500px, if possible. If that’s not possible, add another styling behind the directive that uses brackets. Maybe some directive that is likely to be used anyway, like box-border.
If you have multiple directives in one @apply line its much easier. You can just go ahead and reorder them, so that the one using brackets does not come last.
Can there be an alternative cause for this?
Yes, unfortunately, the error can also come from other functions or directives that translate poorly into css. Another common culprit is the usage of absolute imports with something like background-image: url(/path/to/myimage.png);. This would cause the same error under certain circumstances, as the absolute path cannot be resolved during build time. Also the wrong amount of quotes (either quotes at all or no quotes) can cause this error.
Fixed, or so I hope!
The most common is the error thats happening when you use it with the @apply directive. So this fix should help you in most cases. If its a different culprit, let me know in the comments down below!