1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-scoped-stylesheets-and-postcss
2017-12-06 18:12:42 -08:00
..
pages Update example with-scoped-stylesheets-and-postcss (#1606) 2017-05-27 14:12:37 +02:00
next.config.js Fixed example with-scoped-stylesheets-and-postcss: css-modules reload update from files [name].css.json. (#2110) 2017-07-02 00:36:36 +02:00
package.json Upgrade React for all examples (#3113) 2017-10-17 08:11:46 +02:00
postcss.config.js Update example with-scoped-stylesheets-and-postcss (#1606) 2017-05-27 14:12:37 +02:00
README.md Use canary for all example downloads (#3411) 2017-12-06 18:12:42 -08:00

Deploy to now

Scoped stylesheets with PostCSS example

This is an example of using scoped stylesheets and PostCSS, heavily influenced by @davibe's with-global-stylesheet.

How to use

Using create-next-app

Download create-next-app to bootstrap the example:

npm i -g create-next-app
create-next-app --example with-scoped-stylesheets-and-postcss with-scoped-stylesheets-and-postcss-app

Download manually

Download the example or clone the repo:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/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

Why

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”.

Known issues

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.