sass loader for webpack

Usage

var css = require("!raw!sass!./file.scss");
// => returns compiled css code from file.scss, resolves imports
var css = require("!css!sass!./file.scss");
// => returns compiled css code from file.scss, resolves imports and url(...)s

Use in tandem with the style-loader to add the css rules to your document:

require("!style!css!sass!./file.scss");

webpack config

It's recommended to adjust your webpack.config so style!css!sass! is applied automatically on all files ending on .scss:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass?outputStyle=expanded&includePaths[]=" + 
            (path.resolve(__dirname, './bower_components/bootstrap-sass-official'))
      }
    ]
  }
};

Then you only need to write: require("./file.scss"). See node-sass for the available options.

Install

npm install sass-loader

Caveats

The sass-loader does not currently follow all of the webpack loader guidelines. Specifically, until the mark and resolve dependencies feature is added, webpack will not resolve your @import statements for you or watch and reload when a SASS dependency changes. You can use a third party watch module to handle at least the reloading aspect for the time being.

License

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