Webpack loader that resolves relative paths in url() statements based on the original source file.
Use in conjunction with the sass-loader and specify your asset url() relative to the .scss file in question.
This loader will use the source-map from the SASS compiler to locate the original .scss source file and write a more Webpack-friendly path for your asset. The CSS loader can then locate your asset for individual processing.
Plain CSS works fine:
var css = require('!css-loader!resolve-url-loader!./file.css');
Each url() statement that implies an asset triggers a file search using node fs operations. The asset should be relative to the original source file that was transpiled. This file is determined by consulting the incoming source-map at the point of the url() statement.
Usually the asset is found relative to the original source file. However in some cases there is no immediate match (cough bootstrap cough) and we so we start searching both deeper and shallower from the starting directory.
Shallower paths must be limited to avoid the whole file system from being considered. Progressively shallower paths within the root will be considered. Paths featuring a package.json or bower.json file will not be considered.
If the asset is not found then the url() statement will not be updated with a Webpack module-relative path. However if the url() statement has no source-map source information the loader will fail.
The loader will also fail when input source-map sources cannot all be resolved relative to some consistent path within root.
Limitations / Known-issues
Where url() statements are created in a SASS mixin the file may be expected to be relative to the mixin. Obviously this is not the desired behaviour.
This may be beacuse rework is limited in how it works with the sass-loader source maps.
Unfortunately you need to work around this until we can investigate other solutions.
This loader was written for Webpack 1 and has been tweaked to also support with Webpack 2.
If you find any Webpack 2 problems please comment on any similar existing issue or raise a new one.
Avoid the combination of Webpack 1 with node-sass@^4.0.0.
Use Webpack 2 if you need latest node-sass
Since node-sass@>=4.0.0 source-maps have sometimes featured negative column values. Since this loader relies on source-maps this can cause a fatal error.
I don't have a lot of data on this. If you are stuck in Webpack 1 and find that this combination actually works ok for you please let me know.
Webpack is difficult to configure but extremely rewarding.
I am happy for you to raise an issue to ask a question regarding this package. However ensure you follow the check-list first.
Currently I am notdogfooding this loader in my own work. I may rely on you being able to isolate the problem in a simple example project and to help debug.
I am happy this loader helps so many people. Open-source is provided as-is so please try not project your frustrations. There are some really great people who follow this project who can help.
Before raising a new issue:
remove this loader and make sure it is not a problem with a different loader in your config (most often the case)