From d3d6561cb5b0b1d48c1a0202b372fe9711e4a716 Mon Sep 17 00:00:00 2001
From: tai2 <hello@tai2.net>
Date: Fri, 9 Feb 2018 23:05:30 +0900
Subject: [PATCH] Add regular css description.

---
 docs/css.md | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/docs/css.md b/docs/css.md
index 437675f6e..a863929eb 100644
--- a/docs/css.md
+++ b/docs/css.md
@@ -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).
 
@@ -32,6 +58,8 @@ const Hello = props => (
 )
 ```
 
+**Note:** Declared class is referenced as object property in JavaScript.
+
 
 ## Link styles from your Rails views