Package Exports

@zeit/next-css
@zeit/next-css/css-loader-config

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zeit/next-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Next.js + CSS

Import .css files in your Next.js project

Installation

npm install --save @zeit/next-css

yarn add @zeit/next-css

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 withCSS = require('@zeit/next-css')
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>

With CSS modules

// next.config.js
const withCSS = require('@zeit/next-css')
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>

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 withCSS = require('@zeit/next-css')
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.backdrop}>
      ...
    </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.

// ./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>
    )
  }
}

PostCSS plugins

Create a next.config.js in your project

// next.config.js
const withCSS = require('@zeit/next-css')
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
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  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 withCSS = require('@zeit/next-css')
module.exports = withCSS({
  webpack(config, options) {
    return config
  }
})