Skip to content

Commit 5a8738c

Browse files
committed
chore: change readme
1 parent cd52bdc commit 5a8738c

File tree

1 file changed

+26
-41
lines changed

1 file changed

+26
-41
lines changed

readme.md

Lines changed: 26 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ yarn add next-css-unpluggable
1616

1717
## Usage
1818

19-
The stylesheet is compiled to `.next/static/css`. Next.js will automatically add the css file to the HTML.
19+
The stylesheet is compiled to `.next/static/css`. Next.js will automatically add the css file to the HTML.
2020
In production a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.
2121

2222
### Without CSS modules
@@ -25,8 +25,8 @@ Create a `next.config.js` in the root of your project (next to pages/ and packag
2525

2626
```js
2727
// next.config.js
28-
const withCSS = require('next-css-unpluggable')
29-
module.exports = withCSS()
28+
const withCSS = require('next-css-unpluggable');
29+
module.exports = withCSS();
3030
```
3131

3232
Create a CSS file `style.css`
@@ -40,21 +40,21 @@ Create a CSS file `style.css`
4040
Create a page file `pages/index.js`
4141

4242
```js
43-
import "../style.css"
43+
import '../style.css';
4444

45-
export default () => <div className="example">Hello World!</div>
45+
export default () => <div className="example">Hello World!</div>;
4646
```
4747

48-
__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.__
48+
**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.**
4949

5050
### With CSS modules
5151

5252
```js
5353
// next.config.js
54-
const withCSS = require('next-css-unpluggable')
54+
const withCSS = require('next-css-unpluggable');
5555
module.exports = withCSS({
5656
cssModules: true
57-
})
57+
});
5858
```
5959

6060
Create a CSS file `style.css`
@@ -68,9 +68,9 @@ Create a CSS file `style.css`
6868
Create a page file `pages/index.js`
6969

7070
```js
71-
import css from "../style.css"
71+
import css from '../style.css';
7272

73-
export default () => <div className={css.example}>Hello World!</div>
73+
export default () => <div className={css.example}>Hello World!</div>;
7474
```
7575

7676
### With CSS modules and options
@@ -81,14 +81,14 @@ For instance, [to enable locally scoped CSS modules](https://github.com/css-modu
8181

8282
```js
8383
// next.config.js
84-
const withCSS = require('next-css-unpluggable')
84+
const withCSS = require('next-css-unpluggable');
8585
module.exports = withCSS({
8686
cssModules: true,
8787
cssLoaderOptions: {
8888
importLoaders: 1,
89-
localIdentName: "[local]___[hash:base64:5]",
89+
localIdentName: '[local]___[hash:base64:5]'
9090
}
91-
})
91+
});
9292
```
9393

9494
Create a CSS file `styles.css`
@@ -102,46 +102,33 @@ Create a CSS file `styles.css`
102102
Create a page file `pages/index.js` that imports your stylesheet and uses the hashed class name from the stylesheet
103103

104104
```js
105-
import css from "../style.css"
105+
import css from '../style.css';
106106

107107
const Component = props => {
108-
return (
109-
<div className={css.example}>
110-
...
111-
</div>
112-
)
113-
}
108+
return <div className={css.example}>...</div>;
109+
};
114110

115-
export default Component
111+
export default Component;
116112
```
117113

118114
Your exported HTML will then reflect locally scoped CSS class names.
119115

120116
For a list of supported options, [refer to the webpack `css-loader` README](https://github.com/webpack-contrib/css-loader#options).
121117

122-
123118
### Import CSS files without CSS modules or post-css
124119

125120
#### Without CSS modules
126121

127-
```import 'antd/dist/antd.css?CSSModulesDisable'```
128-
129-
#### Without post-css
130-
131-
```import 'antd/dist/antd.css?postCSSDisable'```
132-
133-
#### Without CSS modules and post-css
134-
135-
```import 'antd/dist/antd.css?postCSSAndCSSModulesDisable'```
122+
`import 'antd/dist/antd.css?CSSModulesDisable'`
136123

137124
### PostCSS plugins
138125

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

141128
```js
142129
// next.config.js
143-
const withCSS = require('next-css-unpluggable')
144-
module.exports = withCSS()
130+
const withCSS = require('next-css-unpluggable');
131+
module.exports = withCSS();
145132
```
146133

147134
Create a `postcss.config.js`
@@ -152,7 +139,7 @@ module.exports = {
152139
// Illustrational
153140
'postcss-css-variables': {}
154141
}
155-
}
142+
};
156143
```
157144

158145
Create a CSS file `style.css` the CSS here is using the css-variables postcss plugin.
@@ -176,7 +163,7 @@ For example, to pass theme env variables to postcss-loader, you can write:
176163

177164
```js
178165
// next.config.js
179-
const withCSS = require('next-css-unpluggable')
166+
const withCSS = require('next-css-unpluggable');
180167
module.exports = withCSS({
181168
postcssLoaderOptions: {
182169
parser: true,
@@ -186,21 +173,19 @@ module.exports = withCSS({
186173
}
187174
}
188175
}
189-
})
176+
});
190177
```
191178

192-
193-
194179
### Configuring Next.js
195180

196181
Optionally you can add your custom Next.js configuration as parameter
197182

198183
```js
199184
// next.config.js
200-
const withCSS = require('next-css-unpluggable')
185+
const withCSS = require('next-css-unpluggable');
201186
module.exports = withCSS({
202187
webpack(config, options) {
203-
return config
188+
return config;
204189
}
205-
})
190+
});
206191
```

0 commit comments

Comments
 (0)