resolve-url-loader
Advanced tools
Comparing version 1.0.1 to 1.0.2
{ | ||
"name": "resolve-url-loader", | ||
"version": "1.0.1", | ||
"version": "1.0.2", | ||
"description": "Webpack loader that resolves relative paths in url() statements based on the original source file", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -5,7 +5,8 @@ # Resolve URL Loader | ||
Webpack loader that resolves relative paths in url() statements based on the original source file | ||
Webpack loader that resolves relative paths in url() statements based on the original source file. | ||
Use in conjunction with the [sass-loader](https://www.npmjs.com/package/sass-loader) and specify your assets relative | ||
to the `sass` file in question. This loader will use the source-map from the `sass` compiler to locate the original file | ||
and write a more complete path for your asset. Subsequent build steps can then locate your asset for processing. | ||
Use in conjunction with the [sass-loader](https://www.npmjs.com/package/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 file and write a more complete path for your asset. Subsequent build steps can then locate your asset for | ||
processing. | ||
@@ -20,3 +21,3 @@ ## Usage | ||
Or using [`sass-loader`](https://github.com/jtangelder/sass-loader): | ||
or using [sass-loader](https://github.com/jtangelder/sass-loader): | ||
@@ -33,3 +34,5 @@ ``` javascript | ||
``` | ||
and | ||
``` javascript | ||
@@ -63,13 +66,4 @@ require('!style!css!resolve-url!sass?sourceMap!./file.scss'); | ||
## How it works | ||
### Options | ||
A [rework](https://github.com/reworkcss/rework) process is run on incoming `css`. The incoming source-map is used to | ||
resolve the original file where there was some preceding transpile step (such as SASS). | ||
Url() statements are identified and a search is begun, commencing at the original file. In some cases there is no | ||
immediate match (<cough>bootstrap</cough>) and we search both deeper and shallower from the starting directory. The | ||
search will proceed until | ||
## Options | ||
* `absolute` Forces the url() to be resolved to an absolute path. This is considered | ||
@@ -79,2 +73,15 @@ [bad practice](http://webpack.github.io/docs/how-to-write-a-loader.html#should-not-embed-absolute-paths) so only do it | ||
* `sourceMap` Generate a source-map. | ||
* `sourceMap` Generate a source-map. | ||
## How it works | ||
The incoming source-map is used to resolve the original file. This is necessary where there was some preceding transpile | ||
step such as SASS. A [rework](https://github.com/reworkcss/rework) process is then run on incoming `css`. | ||
Each `url()` statement that implies an asset triggers a file search using node `fs` operations. The search begins | ||
relative to the original file and usually the asset is found immediately. 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. | ||
The search will continue while within the project directory and until a `package.json` or `bower.json` file is | ||
encountered. | ||
If the asset is not found then the `url()` statement will not be updated. |
12444
83