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-global-stylesheet
James Hegedus f2e56609cd Examples: stabalise README format and create-next-app usage (#4009)
* Examples: clarify language around Yarn create & npx

* add missing READMEs and create-next-app usage

* suggest people tag jthegedus in firebase related issues

* add yarn alt instructions

* cerebraljs example readme & fixes
2018-04-03 14:19:05 +02:00
..
pages With global stylesheet paths (#1327) 2017-03-02 08:37:58 -08:00
styles postcss-loader, postcss-easy-import, normalize.css and autoprefixer (#1352) 2017-03-05 07:48:37 -08:00
.babelrc With global stylesheet paths (#1327) 2017-03-02 08:37:58 -08:00
example.gif add global stylesheet example (#1016) 2017-02-12 00:22:35 +01:00
next.config.js Upgrade standard.js (#4064) 2018-03-27 20:11:03 +02:00
package.json [Fix] with-global-stylesheet example (#3741) 2018-02-09 09:29:10 +01:00
postcss.config.js postcss-loader, postcss-easy-import, normalize.css and autoprefixer (#1352) 2017-03-05 07:48:37 -08:00
README.md Examples: stabalise README format and create-next-app usage (#4009) 2018-04-03 14:19:05 +02:00

Deploy to now

Global Stylesheet example

This is an example of how you can include a global stylesheet in a next.js webapp.

How to use

Using create-next-app

Execute create-next-app with Yarn or npx to bootstrap the example:

npx create-next-app --example with-global-stylesheet with-global-stylesheet-app
# or
yarn create next-app --example with-global-stylesheet with-global-stylesheet-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-global-stylesheet
cd with-global-stylesheet

To get this example running you just need to

npm install
npm run dev
# or
yarn
yarn dev

Visit http://localhost:3000 and try to modify styles/index.scss changing color. Your changes should be picked up instantly.

Also see it working with plain css here example

Deploy it to the cloud with now (download)

now

The idea behind the example

The strategy here is to transpile the stylesheet file to a css-in-js file so that it can be loaded and hot reloaded both on the server and the client. For this purpose I created a babel loader plugin called babel-loader-wrap-in-js.

Another babel plugin module-resolver enables us to import stylesheets from js (e.g. pages or components) through a styles directory alias rather than relative paths.

The sass-loader is configured with includePaths: ['styles', 'node_modules'] so that your scss can @import from those places, again without relative paths, for maximum convenience and ability to use npm-published libraries. Furthermore, glob paths are also supported, so one could for example add 'node_modules/@material/*' to the includePaths, which would make material-components-web (if you'd like) even easier to work with.

Furthermore, PostCSS is used to pre-process both css and scss stylesheets, the latter after Sass pre-processing. This is to illustrate @import 'normalize.css'; from node_modules thanks to postcss-easy-import. Autoprefixer is also added as a "best practice". Consider cssnext instead, which includes autoprefixer as well as many other CSS spec features.

This project shows how you can set it up. Have a look at:

  • .babelrc
  • next.config.js
  • pages/index.js
  • postcss.config.js
  • styles/index.scss

Please, report any issue on enhancement related to this example to its original github repository https://github.com/davibe/next.js-css-global-style-test

If your stylesheets import fonts

Install postcss-url and insert require('postcss-url')({ url: 'inline' }) as the 2nd element of the plugins array in postcss.config.js.