How to SASS with Webpack 5 - Setup Tutorial

If you happen to have a custom Webpack setup, you may be wondering how to set up SASS with Webpack. This short tutorial walks you through the process. First of all, you need to install a SASS loader and a SASS to your dev dependencies:

npm install --save-dev sass-loader node-sass

And second, you can use the SASS loader for all CSS and SCSS files in your Webpack configuration:

...

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(scss|css)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  ...
};

Then in a new src/style.scss file, add some CSS with SASS specific features (e.g. nested selectors) to it:

h1 {
  color: red;

  &:hover {
    color: blue;
  }
}

And in your src/index.js file, or any other JS file, import this new CSS file:

import './style.scss';

That's it. From here you can use SASS in your JavaScript project which is powered by Webpack.