diff --git a/examples/with-global-stylesheet-simple/.babelrc b/examples/with-global-stylesheet-simple/.babelrc new file mode 100644 index 00000000..a615baee --- /dev/null +++ b/examples/with-global-stylesheet-simple/.babelrc @@ -0,0 +1,12 @@ +{ + "plugins": [ + [ + "inline-import", + { + "extensions": [".css"] + } + ] + ], + "presets": ["next/babel"], + "ignore": [] +} diff --git a/examples/with-global-stylesheet-simple/README.md b/examples/with-global-stylesheet-simple/README.md new file mode 100644 index 00000000..948d70c7 --- /dev/null +++ b/examples/with-global-stylesheet-simple/README.md @@ -0,0 +1,48 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet-simple) + +## 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`](https://necolas.github.io/normalize.css/). + +### What if I want to import my own CSS, such as `styles/foo.css`? + +Check out the [with-global-stylesheet](../with-global-stylesheet) example. + +### How It Works + +- Install `babel-plugin-inline-import` using `npm` or `yarn` +- Then, add this to your `.babelrc`: + +```js +{ + "plugins": [ + [ + "inline-import", + { + "extensions": [".css"] + } + ] + ], + "presets": ["next/babel"], + "ignore": [] +} +``` + +- Install any CSS library using `npm` or `yarn`. In this example, I installed [`tachyons`](http://tachyons.io/). +- Import the CSS file. Here, I'm importing a CSS file located at `node_modules/tachyons/css/tachyons.min.css`. + +```js +import tachyons from 'tachyons/css/tachyons.min.css' +``` + +- Add it globally using `styled-jsx`: + +```js + +``` + +### Result ([`index.js`](pages/index.js)): + +![](example.png) diff --git a/examples/with-global-stylesheet-simple/example.png b/examples/with-global-stylesheet-simple/example.png new file mode 100644 index 00000000..2bddf5f9 Binary files /dev/null and b/examples/with-global-stylesheet-simple/example.png differ diff --git a/examples/with-global-stylesheet-simple/package.json b/examples/with-global-stylesheet-simple/package.json new file mode 100644 index 00000000..708a4b36 --- /dev/null +++ b/examples/with-global-stylesheet-simple/package.json @@ -0,0 +1,14 @@ +{ + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next" + }, + "dependencies": { + "babel-plugin-inline-import": "^2.0.6", + "next": "^4.1.3", + "react": "^16.0.0", + "react-dom": "^16.0.0", + "tachyons": "^4.8.1" + } +} diff --git a/examples/with-global-stylesheet-simple/pages/index.js b/examples/with-global-stylesheet-simple/pages/index.js new file mode 100644 index 00000000..4b146e66 --- /dev/null +++ b/examples/with-global-stylesheet-simple/pages/index.js @@ -0,0 +1,29 @@ +import React from 'react' +import tachyons from 'tachyons/css/tachyons.min.css' + +const SomeComponent = () => +
+
+ Photo of a kitten looking menacing. +
+
+
+

Cat

+
+
+

$1,000

+
+
+

+ If it fits, i sits burrow under covers. Destroy couch leave hair everywhere, + and touch water with paw then recoil in horror. +

+
+
+
+ +export default () => +
+ + +