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
Shu Uesugi 9320d9f006 Add with-global-stylesheet-simple (#3157)
* Add with-global-stylesheet-simple

* Lint fix
2017-10-23 20:25:16 +02:00
..
pages Add with-global-stylesheet-simple (#3157) 2017-10-23 20:25:16 +02:00
.babelrc Add with-global-stylesheet-simple (#3157) 2017-10-23 20:25:16 +02:00
example.png Add with-global-stylesheet-simple (#3157) 2017-10-23 20:25:16 +02:00
package.json Add with-global-stylesheet-simple (#3157) 2017-10-23 20:25:16 +02:00
README.md Add with-global-stylesheet-simple (#3157) 2017-10-23 20:25:16 +02:00

Deploy to now

Global Stylesheet Example (Simple Version - CSS inside node_modules)

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