Integrating SASS with Next.js

SASS is probably one of the most loved and used CSS preprocessors out there, and Next.js did an excellent job making it easy to integrate it. In fact, just like CSS modules and Styled JSX, SASS is supported out of the box; we just need to install the sass npm package inside of our Next.js project, and we’re ready to go.

CSS modules with SASS and SCSS syntax

At this point, we can start using CSS modules with SASS and SCSS syntax. Let’s look at a simple example. If we open the pages/index.js file we created earlier, we can just change the CSS import to look as follows:

Click the “Run” button below to execute the code. Once the execution is completed, observe the output by navigating to the link provided at the bottom of the playground