Fork of Next.js + CSS

Import .css files in your Next.js project

Installation

``
yarn add @innocuous/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.

$3

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({
/ config options here /
});
`

Create a CSS file style.css

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

Create a page file pages/index.js

`js
import '../style.css';

export default () =>

;
`

**Note: CSS files can _not_ be imported into your _document.js
. You can use the _app.js
instead or any other page.**

$3

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

;
`

$3

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:

`js
// next.config.js
const withCSS = require('@zeit/next-css');
module.exports = withCSS({
cssModules: true,
cssLoaderOptions: {
modules: {
localIdentName: process.env.NODE_ENV === 'production
? '[hash:base64]'
: '[name]_[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

;
};

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.

$3

Create a next.config.js in your project

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

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),
},
},
},
});
`

$3

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;
},
});
``