[gitbook] update gitbook for archetype styles (#704)

* update gitbook for archetype styles

* update gitbook

* Update the doc

* Update the doc

docs/SUMMARY.md

@@ -41,6 +41,7 @@
     -   [Eslint Config](/chapter1/intermediate/app-archetype/eslint.md)
     -   [Webpack Config](/chapter1/intermediate/app-archetype/webpack-config.md)
     -   [Environment Variables](/chapter1/intermediate/app-archetype/env-vars.md)
+    -   [Extract Styles](/chapter1/intermediate/app-archetype/extract-styles.md)
 
 -   [Component Archetype](chapter1/intermediate/component-archetype/README.md)
 

docs/chapter1/intermediate/app-archetype/README.md

@@ -2,6 +2,8 @@
 
 The application archetype is a pair of npm modules that provide common patterns and configurations for developing a universal React application.  With the application generator, you can quickly create and start developing a React application.  The defaults generally are well suited for many applications, but it is possible to customize some features and enable more advanced features for your specific needs.
 
+-   [Customize Config](/chapter1/intermediate/app-archetype/customize-config.md)
 -   [Eslint Config](/chapter1/intermediate/app-archetype/eslint.md)
 -   [Webpack Config](/chapter1/intermediate/app-archetype/webpack-config.md)
 -   [Environment Variables](/chapter1/intermediate/app-archetype/env-vars.md)
+-   [Extract Styles](/chapter1/intermediate/app-archetype/extract-styles.md)

docs/chapter1/intermediate/app-archetype/env-vars.md

@@ -31,6 +31,9 @@ Some of the app archetype's features can be controlled by environment variables.
 
   * Default is `false`
 
+* `CSS_MODULE_SUPPORT` - If `false`, then disable `CSS-Modules` and `CSS-Next` support, and load as pure `CSS`. If `true`, then enable `CSS-Modules` and `CSS-Next` support, and load as `CSS-Modules + CSS-Next`.
+
+  * Default is `undefined`
 
 * `CSS_MODULE_STYLUS_SUPPORT` - if `true`, then enable `stylus` support for CSS modules.
 

docs/chapter1/intermediate/app-archetype/extract-styles.md

@@ -0,0 +1,21 @@
+# Extract Styles
+
+Application Archetype supports multiple styles, such as pure CSS, [CSS-Modules + CSS-Next](https://github.com/css-modules/css-modules), [Stylus](http://stylus-lang.com/docs/css-style.html) and [SCSS](http://sass-lang.com/). Use the following flags to choose your desired styles.
+
+## Flags
+
+> Note: You can check how to customize the configs [here](/chapter1/intermediate/app-archetype/customize-config.md#extending-webpack-configurations).
+
+- `cssModuleSupport`: A flag to enable `css-modules + css-next` support.
+- <span style="color:red">**[Deprecated Warning] This is not a recommended set up.**</span> `cssModulesStylusSupport`: A flag to enable `stylus` support with CSS modules. (Default: false)
+
+## Style Use Cases
+
+- To use pure CSS, include `*.css` to your styles folder and set `cssModuleSupport` to false.
+- To use CSS-Modules + CSS-Next, include `*.css` to your styles folder.
+
+- To use Stylus, include `*.styl` to your styles folder.
+- To use Stylus along with CSS-Modules + CSS-Next, include `*.styl` to your styles folder and set `cssModuleSupport` to true.
+
+- To use SCSS, include `*.scss` to your styles folder.
+- To use SCSS along with CSS-Modules + CSS-Next, include `*.scss` to your styles folder and set `cssModuleSupport` to true.