README.md

Working with sass stylesheets

Configure webpack

Use sass-loader to parse sass files:

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          // Compiles SASS to CSS
          "sass-loader"
        ]
      }
    ]
  }
};

Import scss from node_modules

The suggested way to import vendor stylesheet directly inside an entry point:

// Load vendor stylesheet inside entry point (index.js)
import "bootstrap/scss/bootstrap.scss";

Load vendor stylesheets inside entry point is less buggy and hot module replacement is way faster.

Notes

If there are errors in parsing url() inside scss files, install resolve-url-loader which must be placed between sass-loader and css-loader.

To import vendor stylesheets (from node_modules) inside an scss file you don't need the tilde ~ char because import statements are parsed by sass-loader. Instead of this method, it's good practice to import vendor stylesheets directly inside an entry point.