Import .css files in your Next.js project

This is a @zeit/next-css FORK which:

• uses require.resolve to get dependency *-loader so that there won't be environment issues
• is tested.
• fixes peer dependencies
• supports options only for @ostai/next-css plugin

npm i @ostai/next-css 

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.

const withCSS = require('@ostai/next-css')

Create a next.config.js in the root of your project (next to pages/ and package.json)

// next.config.js module.exports = withCSS()

Create a CSS file style.css

.example { font-size: 50px; }

Create a page file pages/index.js

import "../style.css" 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.

// next.config.js module.exports = withCSS({ cssModules: true })

Create a CSS file style.css

.example { font-size: 50px; }

Create a page file pages/index.js

import css from "../style.css" export default () => <div className={css.example}>Hello World!</div>

const withPlugins = require('next-compose-plugins') module.exports = withPlugins([ withCSS ], { ...nextConfig })

const withPlugins = require('next-compose-plugins') module.exports = withPlugins([ withCSS.options({ cssLoaderPath: require.resolve('/path/to/css-loader') }) ], { ...nextConfig })

• options? Object
  • postCssLoaderPath? path the require.resolve()d main entry of postcss-loader
  • cssLoaderPath? path the main entry of css-loader
  • ignoreLoaderPath? path the main entry of ignore-loader

Create a new withCSS plugin with preset 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 module.exports = withCSS({ cssModules: true, cssLoaderOptions: { importLoaders: 1, localIdentName: "[local]___[hash:base64:5]", } })

Create a CSS file styles.css

.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.css" 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.

Create a next.config.js in your project

// next.config.js module.exports = withCSS()

Create a postcss.config.js

module.exports = { plugins: { // Illustrational 'postcss-css-variables': {} } }

Create a CSS file style.css 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 module.exports = withCSS({ 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 module.exports = withCSS({ webpack(config, options) { return config } })

MIT