@@ -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.
2020In 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
3232Create a CSS file ` style.css `
@@ -40,21 +40,21 @@ Create a CSS file `style.css`
4040Create 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' );
5555module .exports = withCSS ({
5656 cssModules: true
57- })
57+ });
5858```
5959
6060Create a CSS file ` style.css `
@@ -68,9 +68,9 @@ Create a CSS file `style.css`
6868Create 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' );
8585module .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
9494Create a CSS file ` styles.css `
@@ -102,46 +102,33 @@ Create a CSS file `styles.css`
102102Create 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
107107const 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
118114Your exported HTML will then reflect locally scoped CSS class names.
119115
120116For 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
139126Create 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
147134Create a ` postcss.config.js `
@@ -152,7 +139,7 @@ module.exports = {
152139 // Illustrational
153140 ' postcss-css-variables' : {}
154141 }
155- }
142+ };
156143```
157144
158145Create 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' );
180167module .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
196181Optionally 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' );
201186module .exports = withCSS ({
202187 webpack (config , options ) {
203- return config
188+ return config;
204189 }
205- })
190+ });
206191```
0 commit comments