# @zeit/next-css

> Import `.css` files in your Next.js project

Latest version **1.0.1** (published 2018-09-20) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @zeit/next-css
pnpm add @zeit/next-css
yarn add @zeit/next-css
bun add @zeit/next-css
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-09-20 |
| First published | 2018-01-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2666 |
| Maintainers | arunoda, codetheory, hharnisc, iamevilrabbit, igorklopov, jamo, javivelasco, joecohens, leo, matheuss, nkzawa, olliv, rauchg, timneutkens, tootallnate |

## Links

- npm: https://www.npmjs.com/package/@zeit/next-css
- Repository: https://github.com/zeit/next-plugins
- Homepage: https://github.com/zeit/next-plugins#readme
- Issues: https://github.com/zeit/next-plugins/issues
- npm.io page: https://npm.io/package/@zeit/next-css

## Dependencies (6)

- [find-up](https://npm.io/package/find-up.md) 2.1.0
- [css-loader](https://npm.io/package/css-loader.md) 1.0.0
- [ignore-loader](https://npm.io/package/ignore-loader.md) 0.1.2
- [postcss-loader](https://npm.io/package/postcss-loader.md) 3.0.0
- [extracted-loader](https://npm.io/package/extracted-loader.md) 1.0.4
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 0.4.3

## Recent versions

- 1.0.1 (latest) — 2018-09-20
- 0.2.1-canary.4 (canary) — 2019-02-25
- 1.0.2-canary.2 — 2018-11-14
- 1.0.2-canary.0 — 2018-10-22
- 0.2.1-canary.3 — 2018-09-20
- 1.0.0 — 2018-09-19
- 0.2.1-canary.2 — 2018-08-18
- 0.2.1-canary.1 — 2018-07-30
- 0.2.0 — 2018-05-09
- 0.1.5 — 2018-03-22
- 0.1.4 — 2018-03-07
- 0.1.3 — 2018-03-02
- 0.1.2 — 2018-02-16
- 0.1.1 — 2018-02-15
- 0.1.0 — 2018-02-15
- … 4 more at https://npm.io/package/@zeit/next-css/versions

## README

# Next.js + CSS

Import `.css` files in your Next.js project

## Installation

```
npm install --save @zeit/next-css
```

or

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

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

Create a CSS file `style.css`

```css
.example {
  font-size: 50px;
}
```

Create a page file `pages/index.js`

```js
import "../style.css"

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

__Note: CSS files can _not_ be imported into your [`_document.js`](https://github.com/zeit/next.js#custom-document). You can use the [`_app.js`](https://github.com/zeit/next.js#custom-app) instead or any other page.__

### With CSS modules

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

Create a CSS file `style.css`

```css
.example {
  font-size: 50px;
}
```

Create a page file `pages/index.js`

```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](https://github.com/css-modules/css-modules/blob/master/docs/local-scope.md#css-modules--local-scope), you can write:

```js
// 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`

```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

```js
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](https://github.com/webpack-contrib/css-loader#options).

### PostCSS plugins

Create a `next.config.js` in your project

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

Create a `postcss.config.js`

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

Create a CSS file `style.css` the CSS here is using the css-variables postcss plugin.

```css
: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:

```js
// 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

```js
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  webpack(config, options) {
    return config
  }
})
```

---
_Source: https://npm.io/package/@zeit/next-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._