next-sugarss v1.1.5
Next.js + SugarSS
Import .sss
files in your Next.js project
Installation
npm install --save next-sugarss
or
yarn add next-sugarss
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 the root of your project (next to pages/ and package.json)
// next.config.js
const withSugarSS = require('next-sugarss')
module.exports = withSugarSS()
Create a CSS file style.sss
.example
font-size: 50px
Create a page file pages/index.js
import "../style.sss"
export default () => <div className="example">Hello World!</div>
Note: CSS files can not be imported into your _document.js
. You can use the _app.js
instead or any other page.
With CSS modules
// next.config.js
const withSugarSS = require('next-sugarss')
module.exports = withSugarSS({
cssModules: true
})
Create a CSS file style.sss
.example
font-size: 50px
Create a page file pages/index.js
import styles from "../style.sss"
export default () => <div className={styles.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 withSugarSS = require('next-sugarss')
module.exports = withSugarSS({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
})
Create a CSS file styles.sss
.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 styles from "../style.sss"
const Component = props => {
return (
<div className={styles.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.
PostCSS plugins
Create a next.config.js
in your project
// next.config.js
const withSugarSS = require('next-sugarss')
module.exports = withSugarSS()
Create a postcss.config.js
module.exports = {
plugins: {
// Illustrational
'postcss-css-variables': {}
}
}
Create a CSS file style.sss
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 withSugarSS = require('next-sugarss')
module.exports = withSugarSS({
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 withSugarSS = require('next-sugarss')
module.exports = withSugarSS({
webpack(config, options) {
return config
}
})