How to SASS with Webpack 5 - Setup Tutorial - Robin Wieruch

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:

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

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

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

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