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

Without CSS modules

Create a next.config.js in your project

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Create a CSS file styles.css

.example {
  font-size: 50px;
}

Create a page file pages/index.js

import "../styles.css"

export default () => <div className="test">Hello World!</div>

With CSS modules

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  cssModules: true
})

Create a CSS file styles.css

.example {
  font-size: 50px;
}

Create a page file pages/index.js

import css from "../styles.css"

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

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 styles.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.

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