next-dart-sass v0.0.2
Next.js + Dart Sass
Import and compile Sass files in Next.js using the Dart implementation of the Sass compiler.
Credits
Barely any work is done in this repository besides swapping out some dependencies. All credit goes to the authors of @zeit/next-sass.
README.md
content ported from the same location as the steps are almost exactly the same.
index.js
content ported from the same location as the implementation is almost exactly the same.
Features
- Import
.scss
or.sass
files into your project. - Do so without using
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
const withSass = require('next-dart-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>
With CSS modules
// next.config.js
const withSass = require('next-dart-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>
With CSS modules and options
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('next-dart-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.
With SASS loader options
You can pass options from sass-loader
// next.config.js
const withSass = require('next-dart-sass')
module.exports = withSass({
sassLoaderOptions: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
})
As mentioned in the sass-loader
documentation:
Note that when using Dart Sass, synchronous compilation is twice as fast as asynchronous compilation by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the fibers package to call asynchronous importers from the synchronous code path.
To do so, simply configure as follows:
// next.config.js
const Fiber = require('fibers')
const withSass = require('next-dart-sass')
module.exports = withSass({
sassLoaderOptions: {
fiber: Fiber
}
})
PostCSS plugins
Create a next.config.js
in your project
// next.config.js
const withSass = require('next-dart-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('next-dart-sass')
module.exports = withSass({
postcssLoaderOptions: {
parser: true,
config: {
ctx: {
theme: JSON.stringify(process.env.REACT_APP_THEME)
}
}
}
})
Configuring Next.js
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withSass = require('next-dart-sass')
module.exports = withSass({
webpack(config, options) {
return config
}
})