sass-loader's Introduction

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$/,
        // Query parameters are passed to node-sass
        loader: "style!css!sass?outputStyle=expanded&" +
          "includePaths[]=" +
            (path.resolve(__dirname, "./bower_components")) + "&" +
          "includePaths[]=" +
            (path.resolve(__dirname, "./node_modules"))
      }
    ]
  }
};

Then you only need to write: require("./file.scss").

For requiring .sass files, add indentedSyntax=sass as a loader option:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        // Passing indentedSyntax query param to node-sass
        loader: "style!css!sass?indentedSyntax=sass"
      }
    ]
  }
};

See node-sass for the available options.

Install

npm install sass-loader

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 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.