Next.js style with Sass — SCSS & Fonts

Next.js is very popular server side rendering react framework. It is very useful but how we should style it with SCSS or Sass?

After you create your application with next.js you can use the same template as create-next-app and write your own css in your js files.

As you can see here it contains <style jsx> </style> at the bottom of the file. You can define your classes there and use write your css inside.

Stylings: Sass & SCSS

At that point there is very useful library next-sass

Installation

npm install --save @zeit/next-sass node-sass

or

yarn add @zeit/next-sass node-sass

If you have no next.config.js file on your root folder you should create one to configure it for scss files.

Without CSS modules

// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
  /* config options here */
})