Add SASS support to project (#880)

* Add SASS support to project

* add SASS build to production webpack config

* add SASS build to production webpack config

* revert project sass files to vanilla css onces and comment Sass suport entries in webpack config files

.flowconfig

@@ -15,6 +15,7 @@ esproposal.class_instance_fields=enable
 esproposal.export_star_as=enable
 module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
 module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
+module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
 module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
 module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe

README.md

@@ -129,6 +129,13 @@ If you want to import global css libraries (like `bootstrap`), you can just writ
 @import "~bootstrap/dist/css/bootstrap.css";
 ```
 
+## Sass support
+
+If you want to use Sass in your app, you only need to import `.sass` files instead of `.css` once:
+```js
+import './app.global.scss';
+```
+
 
 ## Packaging
 

flow/CSSModule.js.flow

@@ -0,0 +1,3 @@
+// @flow
+
+declare export default { [key: string]: string }

package.json

@@ -165,9 +165,11 @@
     "jest": "^19.0.2",
     "jsdom": "^9.9.1",
     "minimist": "^1.2.0",
+    "node-sass": "^4.5.2",
     "react-addons-test-utils": "^15.4.2",
     "react-test-renderer": "^15.4.2",
     "redux-logger": "^2.7.4",
+    "sass-loader": "^6.0.3",
     "sinon": "^1.17.7",
     "spectron": "^3.4.1",
     "style-loader": "^0.15.0",

webpack.config.development.js

@@ -11,6 +11,7 @@ import webpack from 'webpack';
 import chalk from 'chalk';
 import merge from 'webpack-merge';
 import { spawn } from 'child_process';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import baseConfig from './webpack.config.base';
 
 const port = process.env.PORT || 1212;
@@ -71,6 +72,39 @@ export default merge(baseConfig, {
           },
         ]
       },
+
+      // Add SASS support  - compile all .global.scss files and pipe it to style.css
+      {
+        test: /\.global\.scss$/,
+        use: [
+          { loader: 'style-loader' },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+          { loader: 'sass-loader' }
+        ]
+      },
+
+      // Add SASS support  - compile all other .scss files and pipe it to style.css
+      {
+        test: /^((?!\.global).)*\.scss$/,
+        use: [
+          { loader: 'style-loader' },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              sourceMap: true,
+              importLoaders: 1,
+              localIdentName: '[name]__[local]__[hash:base64:5]',
+            }
+          },
+          { loader: 'sass-loader' }
+        ]
+      },
       {
         test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
         use: {
@@ -156,6 +190,10 @@ export default merge(baseConfig, {
 
     new webpack.LoaderOptionsPlugin({
       debug: true
+    }),
+
+    new ExtractTextPlugin({
+      filename: '[name].css'
     })
   ],
 

webpack.config.production.js

@@ -45,6 +45,37 @@ export default merge(baseConfig, {
           }
         }),
       },
+
+      // Add SASS support  - compile all .global.scss files and pipe it to style.css
+      {
+        test: /\.global\.scss$/,
+        use: ExtractTextPlugin.extract({
+          use: [
+            {
+              loader: 'css-loader'
+            },
+            { loader: 'sass-loader' }
+          ],
+          fallback: 'style-loader',
+        })
+      },
+
+      // Add SASS support  - compile all other .scss files and pipe it to style.css
+      {
+        test: /^((?!\.global).)*\.scss$/,
+        use: ExtractTextPlugin.extract({
+          use: [{
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              importLoaders: 1,
+              localIdentName: '[name]__[local]__[hash:base64:5]',
+            }
+          },
+          { loader: 'sass-loader' }]
+        }),
+      },
+
       {
         test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
         use: {