@zeit/next-sass

Next.js + Sass

Import .sass or .scss files in your Next.js project

Installation

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

or

yarn add @zeit/next-sass node-sass

Usage

The stylesheet is compiled to .next/static/css. Next.js will automatically add the css file to the HTML.
In production a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.

Without CSS modules

Create a next.config.js in your project

// next.config.js

constwithSass=require('@zeit/next-sass')

module.exports=withSass()

Create a Sass file styles.scss

$font-size:50px;

.example{

font-size:$font-size;

}

Create a page file pages/index.js

import"../styles.scss"

exportdefault()=><div className="example">Hello World!</div>

With CSS modules

// next.config.js

constwithSass=require('@zeit/next-sass')

module.exports=withSass({

cssModules:true

})

Create a Sass file styles.scss

$font-size:50px;

.example{

font-size:$font-size;

}

Create a page file pages/index.js

importcssfrom"../styles.scss"

exportdefault()=><div className={css.example}>Hello World!</div>

With CSS modules and options

You can also pass a list of options to the css-loader by passing an object called cssLoaderOptions.