From 25a5cfb5fc52e77aee13391052d86a669f3bf7e7 Mon Sep 17 00:00:00 2001
From: dntzhang <kmdjs@qq.com>
Date: Wed, 9 May 2018 10:18:53 +0800
Subject: [PATCH] update readme

---
 README.CN.md | 71 ++++++++++++++++++++++++++++++++++------------------
 README.md    | 69 +++++++++++++++++++++++++++++++++-----------------
 2 files changed, 93 insertions(+), 47 deletions(-)

diff --git a/README.CN.md b/README.CN.md
index 18789229a..5c71b2646 100644
--- a/README.CN.md
+++ b/README.CN.md
@@ -102,7 +102,7 @@ render(<App />, 'body')
 
 ### Scoped CSS
 
-`style` 和 `staticStyle` 的区别是 ? For example：
+`style` 和 `staticStyle` 的区别是 ? 例如：
 
 ``` js
 render() {
@@ -120,33 +120,56 @@ render() {
 当你 update 组件或者 setState 时候，`style`方法会渲染三次，并更新head里对应三个地方的样式，`staticStyle` 不再渲染。
 
 
-如果你想使用 scoped css 但又不想写在 js 里, 你可以使用 [to-string-loader](https://www.npmjs.com/package/to-string-loader), 看下 [omi-cli config](https://github.com/AlloyTeam/omi-cli/blob/master/template/app/tools/webpack.base.js#L84-L107)：
+如果你想使用 scoped css 但又不想写在 js 里, 你可以使用 [to-string-loader](https://www.npmjs.com/package/to-string-loader), 看下 [omi-cli config](https://github.com/AlloyTeam/omi-cli/blob/master/template/app/config/webpack.config.dev.js#L156-L162)：
 
 ``` js
-var styleRules = {
-    'scoped.css':{
-        test: /[\\|\/]_[\S]*\.css$/,
-        use: [
-            'to-string-loader',
-            'css-loader'
-        ],
-        include: path.resolve(config.webpack.path.src)
-    },
-    'scoped.less':{
-        test: /[\\|\/]_[\S]*\.less$/,
-        use: [
-            'to-string-loader',
-            'css-loader',
-            'less-loader'
-        ],
-        include: path.resolve(config.webpack.path.src)
-    },
-    'scoped.stylus':{
-	...
-	...		
+{
+    test: /[\\|\/]_[\S]*\.css$/,
+    use: [
+        'to-string-loader',
+        'css-loader'
+    ]
+}
 ```
 
-这里约定了以下划线 '_' 开头的，会经过 to-string-loader 处理成字符串。
+这里约定了以下划线 '_' 开头的，会经过 to-string-loader 处理成字符串。例如:
+
+
+``` js
+import Omi from 'omi'
+//import 进来的 style 是字符串
+import style from './_index.css' 
+
+class App extends Omi.Component {
+
+  staticStyle() {
+    return style
+  }
+
+  style() {
+    return `
+      code{
+        color: ${Math.random() > 0.5 ? 'red' : 'blue'}
+      }
+      .app-logo{
+        cursor: pointer; 
+      }
+    `
+  }
+
+  render() {
+    return (
+      <div class="app">
+        <header class="app-header">
+          <h1 class="app-title">Welcome to Omi</h1>
+        </header>
+      </div>
+    )
+  }
+}
+```
+
+你如果使用 omi-cli 创建项目的话，就可以直接使用上面这个特性，omi-cli 帮你配置好了一切。
 
 ### Store
 
diff --git a/README.md b/README.md
index 1b56d40bf..3b8f69722 100644
--- a/README.md
+++ b/README.md
@@ -119,33 +119,56 @@ The `style` method will render three times to html head element, the `staticStyl
 When you update the component `style` method will rerender, but the `staticStyle` will not rerender.
 
 
-if you want to use the scoped css but you did not want write it in your javascript, you may need [to-string-loader](https://www.npmjs.com/package/to-string-loader), see the [omi-cli config](https://github.com/AlloyTeam/omi-cli/blob/master/template/app/tools/webpack.base.js#L84-L107)：
+If you want to use the scoped css but you did not want write it in your javascript, you may need [to-string-loader](https://www.npmjs.com/package/to-string-loader), see the [omi-cli config](https://github.com/AlloyTeam/omi-cli/blob/master/template/app/config/webpack.config.dev.js#L156-L162)：
 
 ``` js
-var styleRules = {
-    'scoped.css':{
-        test: /[\\|\/]_[\S]*\.css$/,
-        use: [
-            'to-string-loader',
-            'css-loader'
-        ],
-        include: path.resolve(config.webpack.path.src)
-    },
-    'scoped.less':{
-        test: /[\\|\/]_[\S]*\.less$/,
-        use: [
-            'to-string-loader',
-            'css-loader',
-            'less-loader'
-        ],
-        include: path.resolve(config.webpack.path.src)
-    },
-    'scoped.stylus':{
-	...
-	...		
+{
+    test: /[\\|\/]_[\S]*\.css$/,
+    use: [
+        'to-string-loader',
+        'css-loader'
+    ]
+}
 ```
 
-If your css file name is begin with `_`, the css content will use to-string-loader.
+If your css file name is begin with `_`, the css content will use to-string-loader. For example：
+
+``` js
+import Omi from 'omi'
+//typeof style is string
+import style from './_index.css' 
+
+class App extends Omi.Component {
+
+  staticStyle() {
+    return style
+  }
+
+  style() {
+    return `
+      code{
+        color: ${Math.random() > 0.5 ? 'red' : 'blue'}
+      }
+      .app-logo{
+        cursor: pointer; 
+      }
+    `
+  }
+
+  render() {
+    return (
+      <div class="app">
+        <header class="app-header">
+          <h1 class="app-title">Welcome to Omi</h1>
+        </header>
+      </div>
+    )
+  }
+}
+```
+
+You can use the feature in the project created by omi-cli with no configuration.
+
 
 ### Store