next.js/examples/with-global-stylesheet-simple

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):