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-simple/README.md
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

2.3 KiB

Deploy to now

Global Stylesheet Example (Simple Version - CSS inside node_modules)

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

Download manually

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-global-stylesheet-simple
cd with-global-stylesheet-simple

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

Deploy it to the cloud with now (download)

now

The idea behind the example

This is an example of importing a CSS file located inside node_modules (ones you downloaded using npm or yarn).

This would be useful for importing CSS libraries such as normalize.css.

What if I want to import my own CSS, such as styles/foo.css?

Check out the with-global-stylesheet example.

How It Works

  • Install babel-plugin-inline-import using npm or yarn
  • Then, add this to your .babelrc:
{
  "plugins": [
    [
      "inline-import",
      {
        "extensions": [".css"]
      }
    ]
  ],
  "presets": ["next/babel"],
  "ignore": []
}
  • Install any CSS library using npm or yarn. In this example, I installed tachyons.
  • Import the CSS file. Here, I'm importing a CSS file located at node_modules/tachyons/css/tachyons.min.css.
import tachyons from "tachyons/css/tachyons.min.css";
  • Add it globally using styled-jsx:
<style jsx global>
  {tachyons}
</style>

Result (index.js):