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(, '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 (
+
+
+
+ )
+ }
+}
+```
+
+你如果使用 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 (
+
+
+
+ )
+ }
+}
+```
+
+You can use the feature in the project created by omi-cli with no configuration.
+
### Store