Skip to content

Commit e72b79b

Browse files
committed
Merge pull request #63 from jtangelder/release/v1.0.0
2 parents 1671462 + 3434848 commit e72b79b

File tree

3 files changed

+23
-8
lines changed

3 files changed

+23
-8
lines changed

CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
Changelog
2+
---------
3+
4+
### 1.0.0
5+
6+
- 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)

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)

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sass-loader",
3-
"version": "0.5.0",
4-
"description": "Sass loader for Webpack",
3+
"version": "1.0.0",
4+
"description": "Sass loader for webpack",
55
"main": "index.js",
66
"scripts": {
77
"pretest": "node test/prepare.js",

0 commit comments

Comments
 (0)