alan-agius4 / speedy-webpack-sass-loader

A faster Webpack SASS Loader

@speedy/sass-loader

A faster Webpack SASS Loader.

This is a drop in replacement for SASS Loader It is highly simplified in order to improve build times on large application with a lot of SASS imports.

This has mainly been developed for "legacy" SASS architecture, ie: SASS is not required within a JS file. However this doesn't mean it will not work with modern architectures.

Install

npm install @speedy/sass-loader node-sass webpack --save-dev

Examples

// webpack.config.js
module.exports = {
  entry: {
    "app.mobile": "./src/apps/app/app.scss"
  },
  module: {
      rules: [{
          test: /\.scss$/,
          loader: "@speedy/sass-loader" // compiles SASS to CSS
      }]
  }
};

Usually, it's recommended to extract the style sheets into a dedicated file in production using the ExtractTextPlugin. This way your styles are not dependent on JavaScript:

// webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    "app.mobile": "./src/apps/app/app.scss"
  },

  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: "@speedy/sass-loader",
              options: {
                includePaths: ["./src/assets/sass"]
              }
            }
          ]
        })
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin({
      filename: "[name].css",
      allChunks: true
    })
  ]
};