From 866f386a0dff8db1c0b55e6c279c24508bb1a650 Mon Sep 17 00:00:00 2001 From: Johannes Ewald Date: Sun, 22 Mar 2015 23:13:49 +0100 Subject: [PATCH 1/3] Introduce CHANGELOG - Moved `node-sass^3.0.0-alpha.0` to `peerDependencies` [#28](https://github.com/jtangelder/sass-loader/issues/28) - Using webpack's module resolver as custom importer [#39](https://github.com/jtangelder/sass-loader/issues/31) - Add synchronous compilation support for usage with [enhanced-require](https://github.com/webpack/enhanced-require) [#39](https://github.com/jtangelder/sass-loader/pull/39) --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..4aaf9070 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,8 @@ +Changelog +--------- + +### 1.0.0 + +- Moved `node-sass^3.0.0-alpha.0` to `peerDependencies` [#28](https://github.com/jtangelder/sass-loader/issues/28) +- Using webpack's module resolver as custom importer [#39](https://github.com/jtangelder/sass-loader/issues/31) +- Add synchronous compilation support for usage with [enhanced-require](https://github.com/webpack/enhanced-require) [#39](https://github.com/jtangelder/sass-loader/pull/39) \ No newline at end of file From b85747104fc888a91f24d065fe6bd3b19e718ed4 Mon Sep 17 00:00:00 2001 From: Johannes Ewald Date: Sun, 22 Mar 2015 23:14:01 +0100 Subject: [PATCH 2/3] Update README --- README.md | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 936a7320..375ff4af 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ `npm install sass-loader` +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. + ## Usage [Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html) @@ -63,6 +65,16 @@ module.exports = { See [node-sass](https://github.com/andrew/node-sass) for all available options. +### Imports + +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) + +```css +@import "~bootstrap/less/bootstrap"; +``` + +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";` + ### .sass files For requiring `.sass` files, add `indentedSyntax` as a loader option: @@ -83,7 +95,7 @@ module.exports = { ## Source maps -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). +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). Then your `webpack.config.js` should look like this: @@ -115,11 +127,6 @@ module.exports = { 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. - -## Caveats - -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). - ## License MIT (http://www.opensource.org/licenses/mit-license.php) From 34348486aed6299f784827d2f3978c9015525f30 Mon Sep 17 00:00:00 2001 From: Johannes Ewald Date: Sun, 22 Mar 2015 23:15:07 +0100 Subject: [PATCH 3/3] v1.0.0 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7c2b09ca..8968a67e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sass-loader", - "version": "0.5.0", - "description": "Sass loader for Webpack", + "version": "1.0.0", + "description": "Sass loader for webpack", "main": "index.js", "scripts": { "pretest": "node test/prepare.js",