Skip to content

Commit b857471

Browse files
committed
Update README
1 parent 866f386 commit b857471

File tree

1 file changed

+13
-6
lines changed

1 file changed

+13
-6
lines changed

README.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
`npm install sass-loader`
66

7+
Starting with `1.0.0`, the sass-loader requires [node-sass](https://github.com/sass/node-sass) as [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies). Thus you are able to specify the required version accurately.
8+
79
## Usage
810

911
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
@@ -63,6 +65,16 @@ module.exports = {
6365

6466
See [node-sass](https://github.com/andrew/node-sass) for all available options.
6567

68+
### Imports
69+
70+
webpack provides an [advanced mechanism to resolve files](http://webpack.github.io/docs/resolving.html). The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your sass-modules from `node_modules`. Just prepend them with a `~` which tells webpack to look-up the [`modulesDirectories`](http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories)
71+
72+
```css
73+
@import "~bootstrap/less/bootstrap";
74+
```
75+
76+
It's important to only prepend it with `~`, because `~/` resolves to the home-directory. webpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS- and Sass-files have no special syntax for importing relative files. Writing `@import "file"` is the same as `@import "./file";`
77+
6678
### .sass files
6779

6880
For requiring `.sass` files, add `indentedSyntax` as a loader option:
@@ -83,7 +95,7 @@ module.exports = {
8395

8496
## Source maps
8597

86-
Because of browser limitations, source maps are only available in conjunction with the [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin). Use that plugin to extract the CSS code from the generated JS bundle into a separate file (which even improves the perceived performance because JS and CSS are loaded in parallel).
98+
Because of browser limitations, source maps are only available in conjunction with the [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin). Use that plugin to extract the CSS code from the generated JS bundle into a separate file (which even improves the perceived performance because JS and CSS are downloaded in parallel).
8799

88100
Then your `webpack.config.js` should look like this:
89101

@@ -115,11 +127,6 @@ module.exports = {
115127

116128
If you want to view the original Sass files inside Chrome and even edit it, [there's a good blog post](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0). Checkout [test/sourceMap](https://github.com/jtangelder/sass-loader/tree/master/test) for a running example. Make sure to serve the content with an HTTP server.
117129

118-
119-
## Caveats
120-
121-
Currently the sass-loader does not follow all of the webpack loader guidelines. The general problem is that the entry scss-file is passed to [node-sass](https://github.com/sass/node-sass) which does pretty much the rest. Thus `@import` statements inside your scss-files cannot be resolved by webpack's resolver. However, there is an [issue for that missing feature in libsass](https://github.com/sass/libsass/issues/21).
122-
123130
## License
124131

125132
MIT (http://www.opensource.org/licenses/mit-license.php)

0 commit comments

Comments
 (0)