https://github.com/codyjasonbennett/next-postcss
🧰 PostCSS for Next.js
https://github.com/codyjasonbennett/next-postcss
css nextjs postcss react webpack
Last synced: 6 months ago
JSON representation
🧰 PostCSS for Next.js
- Host: GitHub
- URL: https://github.com/codyjasonbennett/next-postcss
- Owner: CodyJasonBennett
- License: mit
- Created: 2021-05-08T01:56:29.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-16T08:54:15.000Z (about 5 years ago)
- Last Synced: 2025-03-04T12:05:19.306Z (over 1 year ago)
- Topics: css, nextjs, postcss, react, webpack
- Language: JavaScript
- Homepage:
- Size: 48.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# next-postcss
Import `.css` files in your Next.js project with PostCSS.
## Installation
```
npm install --save next-postcss
```
or
```
yarn add next-postcss
```
## 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('next-postcss');
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 () =>
Hello World!;
```
**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('next-postcss');
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 () =>
Hello World!;
```
### 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('next-postcss');
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
...;
};
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('next-postcss');
module.exports = withCSS({
/* config options here */
});
```
Create a `postcss.config.js` or `.postcssrc`
```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` or `.postcss` are 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('next-postcss');
module.exports = withCSS({
postcssLoaderOptions: {
parser: true,
postcssOptions: {
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('next-postcss');
module.exports = withCSS({
webpack(config, options) {
return config;
},
});
```