You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Moved `node-sass^3.0.0-alpha.0` to `peerDependencies`[#28](https://github.com/jtangelder/sass-loader/issues/28)
7
+
- Using webpack's module resolver as custom importer [#39](https://github.com/jtangelder/sass-loader/issues/31)
8
+
- Add synchronous compilation support for usage with [enhanced-require](https://github.com/webpack/enhanced-require)[#39](https://github.com/jtangelder/sass-loader/pull/39)
Copy file name to clipboardExpand all lines: README.md
+13-6Lines changed: 13 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,8 @@
4
4
5
5
`npm install sass-loader`
6
6
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
+
7
9
## Usage
8
10
9
11
[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
@@ -63,6 +65,16 @@ module.exports = {
63
65
64
66
See [node-sass](https://github.com/andrew/node-sass) for all available options.
65
67
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
+
66
78
### .sass files
67
79
68
80
For requiring `.sass` files, add `indentedSyntax` as a loader option:
@@ -83,7 +95,7 @@ module.exports = {
83
95
84
96
## Source maps
85
97
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).
87
99
88
100
Then your `webpack.config.js` should look like this:
89
101
@@ -115,11 +127,6 @@ module.exports = {
115
127
116
128
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.
117
129
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
-
123
130
## License
124
131
125
132
MIT (http://www.opensource.org/licenses/mit-license.php)
0 commit comments