Import .sass
or .scss
files in your Next.js project
npm install --save @zeit/next-sass node-sass
or
yarn add @zeit/next-sass node-sass
The stylesheet is compiled to .next/static/style.css
. You have to include it into the page using a custom _document.js
. The file will be served from /_next/static/style.css
// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<link rel="stylesheet" href="/_next/static/style.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
Create a next.config.js
in your project
// next.config.js
const withSass = 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"
export default () => <div className="example">Hello World!</div>
// next.config.js
const withSass = 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
import css from "../styles.scss"
export default () => <div className={css.example}>Hello World!</div>
You can also pass a list of options to the css-loader
by passing an object called cssLoaderOptions
.
For instance, to enable locally scoped CSS modules, you can write:
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
})
Create a SCSS file style.scss
.example {
font-size: 50px;
}
Create a page file pages/index.js
that imports your stylesheet and uses the hashed class name from the stylesheet
import css from "../style.scss"
const Component = props => {
return (
<div className={css.example}>
...
</div>
)
}
export default Component
Your exported HTML will then reflect locally scoped CSS class names.
For a list of supported options, refer to the webpack css-loader
README.
You can pass options from node-sass
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
sassLoaderOptions: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
})
// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<link rel="stylesheet" href="/_next/static/style.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
Create a next.config.js
in your project
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass()
Create a postcss.config.js
module.exports = {
plugins: {
// Illustrational
'postcss-css-variables': {}
}
}
Create a CSS file styles.scss
the CSS here is using the css-variables postcss plugin.
:root {
--some-color: red;
}
.example {
/* red */
color: var(--some-color);
}
When postcss.config.js
is not found postcss-loader
will not be added and will not cause overhead.
You can also pass a list of options to the postcss-loader
by passing an object called postcssLoaderOptions
.
For example, to pass theme env variables to postcss-loader, you can write:
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
postcssLoaderOptions: {
parser: true,
config: {
ctx: {
theme: JSON.stringify(process.env.REACT_APP_THEME)
}
}
}
})
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass({
webpack(config, options) {
return config
}
})