terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity
next.js/examples/with-scoped-stylesheets-and-postcss/README.md
Thomas Lindstrøm 6e5d57dae9 Add example with-scoped-stylesheets-and-postcss (#1146) 
* Add example `with-external-stylesheets-and-postcss`

* 🔥 Remove extra semi-colon

* 📝 Attribute `with-global-stylesheet`

* Force a new test

* 📝 Update README.md

* Rename `external` -> `scoped`
2017-02-17 16:04:58 +01:00

1.4 KiB
Raw Blame History

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

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

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 bugs

There's a bug, possibly within next.js, making composition between files unuseable. Consider the following:

styles.css

.paragraph {
  composes: font-sans from '../global.css';
}

global.css

.font-sans {
  font-family: georgia; /* ;) */
}

The following error is thrown:

Module build failed: Error: Cannot find module '-!./../node_modules/css-loader/index.js??ref--6-4!./../node_modules/postcss-loader/index.js!../global.css'