Sass and Less

The additional configuration to add Sass or Less to this setup is relatively simple.

Sass

Sass support is provided by sass-loader. Install it via npm, along with the node-sass package.

npm install --save sass-loader node-sass

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  context: __dirname,

  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js'
  },

  entry: {
    app: './js/app.js'
  },

  module: {
    loaders: [
      {test: /\.(scss|sass)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'sass-loader')}
    ]
  },

  sassLoader: {
    includePaths: [path.join(__dirname, 'scss')]
  },

  plugins: [
    new ExtractTextPlugin('app.css')
  ]
}

There are a few notable changes here. First, we've changed the test regular expression for our loader to look for files that end in either .scss or .sass instead of .css.

We've also added some needed configuration required by sass-loader to tell it where our sass files are located.