Sass is a CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as syntactic sugar) into regular CSS.
Next.js allows you to import Sass using both the
.sass extensions. You can use component-level Sass via CSS Modules and the
To style your components using CSS Modules, name your stylesheet files with the
Sass node package adds by CLI if chosen as CSS Preprocessor during project creating phase. Since Next.js doesn’t come with Sass, be sure to install with
npm install sass if you want to add Sass afterwards.
Next.js has built-in Sass support, no configuration required. Just install the Sass package if you haven't chosen from our CLI as a preprocessor then Next.js will see this dependency and enable built-in Sass loader.
You can customize Bootstrap if UI framework chosen as Bootstrap along with Sass during creation phase.
Bootstrap’s source Sass files added to under
src/styles folder directory.