Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9320d9f

Browse files
chibicodetimneutkens
authored andcommitted
Add with-global-stylesheet-simple (vercel#3157)
* Add with-global-stylesheet-simple * Lint fix
1 parent ef157d9 commit 9320d9f

File tree

5 files changed

+103
-0
lines changed

5 files changed

+103
-0
lines changed
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"plugins": [
3+
[
4+
"inline-import",
5+
{
6+
"extensions": [".css"]
7+
}
8+
]
9+
],
10+
"presets": ["next/babel"],
11+
"ignore": []
12+
}
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
[![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)
2+
3+
## Global Stylesheet Example (Simple Version - CSS inside `node_modules`)
4+
5+
This is an example of importing a CSS file located inside `node_modules` (ones you downloaded using `npm` or `yarn`).
6+
7+
This would be useful for importing CSS libraries such as [`normalize.css`](https://necolas.github.io/normalize.css/).
8+
9+
### What if I want to import my own CSS, such as `styles/foo.css`?
10+
11+
Check out the [with-global-stylesheet](../with-global-stylesheet) example.
12+
13+
### How It Works
14+
15+
- Install `babel-plugin-inline-import` using `npm` or `yarn`
16+
- Then, add this to your `.babelrc`:
17+
18+
```js
19+
{
20+
"plugins": [
21+
[
22+
"inline-import",
23+
{
24+
"extensions": [".css"]
25+
}
26+
]
27+
],
28+
"presets": ["next/babel"],
29+
"ignore": []
30+
}
31+
```
32+
33+
- Install any CSS library using `npm` or `yarn`. In this example, I installed [`tachyons`](http://tachyons.io/).
34+
- Import the CSS file. Here, I'm importing a CSS file located at `node_modules/tachyons/css/tachyons.min.css`.
35+
36+
```js
37+
import tachyons from 'tachyons/css/tachyons.min.css'
38+
```
39+
40+
- Add it globally using `styled-jsx`:
41+
42+
```js
43+
<style jsx global>{tachyons}</style>
44+
```
45+
46+
### Result ([`index.js`](pages/index.js)):
47+
48+
![](example.png)
103 KB
Loading[フレーム]
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"scripts": {
3+
"dev": "next dev",
4+
"build": "next build",
5+
"start": "next"
6+
},
7+
"dependencies": {
8+
"babel-plugin-inline-import": "^2.0.6",
9+
"next": "^4.1.3",
10+
"react": "^16.0.0",
11+
"react-dom": "^16.0.0",
12+
"tachyons": "^4.8.1"
13+
}
14+
}
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
import tachyons from 'tachyons/css/tachyons.min.css'
3+
4+
const SomeComponent = () =>
5+
<div className='sans-serif'>
6+
<article className='br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center'>
7+
<img src='http://placekitten.com/g/600/300' className='db w-100 br2 br--top' alt='Photo of a kitten looking menacing.' />
8+
<div className='pa2 ph3-ns pb3-ns'>
9+
<div className='dt w-100 mt1'>
10+
<div className='dtc'>
11+
<h1 className='f5 f4-ns mv0'>Cat</h1>
12+
</div>
13+
<div className='dtc tr'>
14+
<h2 className='f5 mv0'>1,000ドル</h2>
15+
</div>
16+
</div>
17+
<p className='f6 lh-copy measure mt2 mid-gray'>
18+
If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
19+
and touch water with paw then recoil in horror.
20+
</p>
21+
</div>
22+
</article>
23+
</div>
24+
25+
export default () =>
26+
<div>
27+
<SomeComponent />
28+
<style jsx global>{tachyons}</style>
29+
</div>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /