how-to-use-sass.md

How to Use Sass/SCSS

Note: Using plain CSS via PostCSS is recommended approach because it reduces the size of the tech stack used in the project, enforces you to learn vanilla CSS syntax with modern CSS Level 3+ features that allow you doing everything you would normally do with Sass/SCSS. Also compilation of plain .css files should work faster with postcss pre-processor than node-sass.

Step 1

Install node-sass (includes node-gyp and prerequisites) and sass-loader modules as dev dependencies:

$ yarn add node-sass --dev
$ yarn add sass-loader --dev

Step 2

Update webpack.config.js file to use sass-loader for .scss files:

const config = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'isomorphic-style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: isDebug,
              minimize: !isDebug,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: './tools/postcss.sass.js',
              },
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      ...
    ]
  }
  ...
}

Step 3

Add one more configuration (tools/postcss.sass.js) for PostCSS to enable Autoprefixer for your .scss files:

module.exports = () => ({
  plugins: [
    require('autoprefixer')(),
  ],
});

For more information visit https://github.com/jtangelder/sass-loader and https://github.com/sass/node-sass