sass-loader 3.1.2 → 3.2.3

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 Changelog
 ---------
 
+### 3.2.1
+
+- Add `webpack@^2.1.0-beta` as peer dependency [#233](https://github.com/jtangelder/sass-loader/pull/233)
+
+### 3.2.0
+
+- Append file content instead of overwriting when `data`-option is already present [#216](https://github.com/jtangelder/sass-loader/pull/216)
+- Make `indentedSyntax` option a bit smarter [#196](https://github.com/jtangelder/sass-loader/pull/196)
+
 ### 3.1.2
 
 - Fix loader query not overriding webpack config [#189](https://github.com/jtangelder/sass-loader/pull/189)
 - Update peer-dependencies [#182](https://github.com/jtangelder/sass-loader/pull/182)
-  - `node-sass^3.4.2`
-  - `webpack^1.12.6`
+  - `node-sass@^3.4.2`
+  - `webpack@^1.12.6`
 
 ### 3.1.1
 

package/README.md

@@ -15,9 +15,9 @@ as [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies
 
 ``` javascript
 var css = require("!raw!sass!./file.scss");
-// => returns compiled css code from file.scss, resolves Sass imports
+// returns compiled css code from file.scss, resolves Sass imports
 var css = require("!css!sass!./file.scss");
-// => returns compiled css code from file.scss, resolves Sass and CSS imports and url(...)s
+// returns compiled css code from file.scss, resolves Sass and CSS imports and url(...)s
 ```
 
 Use in tandem with the [`style-loader`](https://github.com/webpack/style-loader) and [`css-loader`](https://github.com/webpack/css-loader) to add the css rules to your document:
@@ -25,7 +25,7 @@ Use in tandem with the [`style-loader`](https://github.com/webpack/style-loader)
 ``` javascript
 require("!style!css!sass!./file.scss");
 ```
-*NOTE: If you encounter module errors complaining about a missing `style` or `css` module, make sure you have installed all required loaders via npm.*
+*Please note: If you encounter module errors complaining about a missing `style` or `css` module, make sure you have installed all required loaders via npm.*
 
 ### Apply via webpack config
 
@@ -49,9 +49,9 @@ Then you only need to write: `require("./file.scss")`.
 
 ### Sass options
 
-You can pass options to node-sass by defining a `sassLoader`-property on your `webpack.config.js`. See [node-sass](https://github.com/andrew/node-sass) for all available options.
+You can pass options to node-sass by defining a `sassLoader`-property on your `webpack.config.js`. See [node-sass](https://github.com/andrew/node-sass) for all available Sass-options.
 
-``` javascript
+```javascript
 module.exports = {
   ...
   module: {
@@ -61,7 +61,7 @@ module.exports = {
         loaders: ["style", "css", "sass"]
       }
     ]
-  }
+  },
   sassLoader: {
     includePaths: [path.resolve(__dirname, "./some-folder")]
   }
@@ -82,7 +82,7 @@ module.exports = {
         loaders: ["style", "css", "sass?config=otherSassLoaderConfig"]
       }
     ]
-  }
+  },
   otherSassLoaderConfig: {
     ...
   }
@@ -91,13 +91,27 @@ module.exports = {
 
 ### 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).
+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 `~` to tell webpack that this is not a relative import:
 
 ```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";`
+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";`
+
+### Environment variables
+
+If you want to prepend Sass code before the actual entry file, you can simply set the `data`-option. In this case, the sass-loader will not override the `data`-option but just append the entry's content. This is especially useful when some of your Sass variables depend on the environment:
+
+```javascript
+module.exports = {
+  ...
+  sassLoader: {
+    data: "$env: " + process.env.NODE_ENV + ";"
+  }
+};
+```
+
 
 ### Problems with `url(...)`
 
@@ -111,6 +125,15 @@ More likely you will be disrupted by this second issue. It is natural to expect
 - Add the missing url rewriting using the [resolve-url-loader](https://github.com/bholloway/resolve-url-loader). Place it directly after the sass-loader in the loader chain.
 - Library authors usually provide a variable to modify the asset path. [bootstrap-sass](https://github.com/twbs/bootstrap-sass) for example has an `$icon-font-path`. Check out [this working bootstrap example](https://github.com/jtangelder/sass-loader/tree/master/test/bootstrapSass).
 
+### Extracting stylesheets
+
+Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or [hot module replacement](http://webpack.github.io/docs/hot-module-replacement-with-webpack.html) in development. In production, on the other hand, it's not a good idea to apply your stylesheets depending on JS execution. Rendering may be delayed or even a [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) might be visible. Thus it's often still better to have them as separate files in your final production build.
+
+There are two possibilties to extract a stylesheet from the bundle:
+
+- [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)
+- [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) (more complex, but works in all use-cases)
+
 ### Source maps
 
 To enable CSS Source maps, you'll need to pass the `sourceMap`-option to the sass- *and* the css-loader. Your `webpack.config.js` should look like this:

package/index.js

@@ -205,10 +205,10 @@ module.exports = function (content) {
 
     this.cacheable();
 
-    sassOptions.data = content;
+    sassOptions.data = sassOptions.data ? (sassOptions.data + os.EOL + content) : content;
 
     // Skip empty files, otherwise it will stop webpack, see issue #21
-    if (content.trim() === '') {
+    if (sassOptions.data.trim() === '') {
         return isSync ? content : callback(null, content);
     }
 
@@ -235,7 +235,14 @@ module.exports = function (content) {
     }
 
     // indentedSyntax is a boolean flag
-    sassOptions.indentedSyntax = Boolean(sassOptions.indentedSyntax);
+    var ext = path.extname(resourcePath);
+
+    // If we are compling sass and indentedSyntax isn't set, automatically set it.
+    if (ext && ext.toLowerCase() === '.sass' && sassOptions.indentedSyntax === undefined) {
+        sassOptions.indentedSyntax = true;
+    } else {
+        sassOptions.indentedSyntax = Boolean(sassOptions.indentedSyntax);
+    }
 
     // Allow passing custom importers to `node-sass`. Accepts `Function` or an array of `Function`s.
     sassOptions.importer = sassOptions.importer ? [].concat(sassOptions.importer) : [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sass-loader",
-  "version": "3.1.2",
+  "version": "3.2.3",
   "description": "Sass loader for webpack",
   "main": "index.js",
   "scripts": {
@@ -28,7 +28,7 @@
   "license": "MIT",
   "peerDependencies": {
     "node-sass": "^3.4.2",
-    "webpack": "^1.12.6"
+    "webpack": "^1.12.6 || ^2.1.0-beta"
   },
   "dependencies": {
     "async": "^1.4.0",
@@ -44,9 +44,9 @@
     "mocha": "^2.3.4",
     "node-sass": "3.4.2",
     "raw-loader": "^0.5.1",
-    "should": "^7.0.2",
+    "should": "^8.2.2",
     "style-loader": "^0.13.0",
-    "webpack": "1.12.6",
+    "webpack": "^1.12.14",
     "webpack-dev-server": "^1.7.0"
   }
 }