This is an example of using scoped stylesheets and PostCSS, heavily influenced by @davibe's with-global-stylesheet
.
Download the example or clone the repo:
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-scoped-stylesheets-and-postcss
cd with-scoped-stylesheets-and-postcss
To get this example running you must
npm install .
npm run dev
Visit http://localhost:3000 and try edit pages/styles.css
. Your changes should be picked up instantly.
Deploy it to the cloud with now (download)
now
Scoped CSS is neat and keeps your JS clean. PostCSS is amazing for extended features, such as nesting. CSS Modules keep your class names “local”.
Composed CSS files are not watched by next.js, and thus, if you change one, nothing will happen. You'll need to edit a JS file or the CSS file you're composing for it to hot reload.