Skip to content

Commit

Permalink
Add regular css description.
Browse files Browse the repository at this point in the history
  • Loading branch information
tai2 committed Feb 9, 2018
1 parent 95109cd commit d3d6561
Showing 1 changed file with 29 additions and 1 deletion.
30 changes: 29 additions & 1 deletion docs/css.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,33 @@
Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScript files.


## Import styles into your JS app
## Import global styles into your JS app

```sass
// app/javascript/hello_react/styles/hello-react.sass
.hello-react
padding: 20px
font-size: 12px
```

```js
// React component example
// app/javascripts/packs/hello_react.jsx

import React from 'react'
import helloIcon from '../hello_react/images/icon.png'
import '../hello_react/styles/hello-react'

const Hello = props => (
<div className="hello-react">
<img src={helloIcon} alt="hello-icon" />
<p>Hello {props.name}!</p>
</div>
)
```

## Import scoped styles into your JS app

Stylesheets end with '.modules.*' is treated as [CSS Modules](https://github.com/css-modules/css-modules).

Expand Down Expand Up @@ -32,6 +58,8 @@ const Hello = props => (
)
```

**Note:** Declared class is referenced as object property in JavaScript.


## Link styles from your Rails views

Expand Down

0 comments on commit d3d6561

Please sign in to comment.