Adding SCSS variables config to webpack prod config

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 build/
+build_webpack/
 build/contracts/
 truffle-config.js

config/webpack.config.dev.js

@@ -113,6 +113,7 @@ module.exports = {
           /\.html$/,
           /\.(js|jsx)$/,
           /\.css$/,
+          /\.scss$/,
           /\.json$/,
           /\.woff$/,
           /\.woff2$/,
@@ -138,8 +139,8 @@ module.exports = {
         }
       },
       {
-        test: /\.css$/,
+        test: /\.(scss|css)$/,
-        loader: 'style!css?importLoaders=1&modules=true&minimize=true&localIdentName=[name]__[local]___[hash:base64:5]!postcss?sourceMap'
+        loader: 'style!css?importLoaders=1&modules=true&minimize=false&localIdentName=[name]__[local]___[hash:base64:5]!postcss?sourceMap'
       },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.

config/webpack.config.prod.js

@@ -1,4 +1,5 @@
 var autoprefixer = require('autoprefixer');
+var cssvars = require('postcss-simple-vars');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
@@ -8,7 +9,7 @@ var url = require('url');
 var paths = require('./paths');
 var getClientEnvironment = require('./env');
 
-
+var cssvariables = require(paths.appSrc + '/theme/variables');
 
 function ensureSlash(path, needsSlash) {
   var hasSlash = path.endsWith('/');
@@ -116,6 +117,7 @@ module.exports = {
           /\.html$/,
           /\.(js|jsx)$/,
           /\.css$/,
+          /\.scss$/,
           /\.json$/,
           /\.woff$/,
           /\.woff2$/,
@@ -146,8 +148,8 @@ module.exports = {
       // use the "style" loader inside the async code so CSS from them won't be
       // in the main CSS file.
       {
-        test: /\.css$/,
+        test: /\.(scss|css)$/,
-        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss')
+        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1&modules=true&minimize=false!postcss?sourceMap')
         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
       },
       // JSON is not enabled by default in Webpack but both Node and Browserify
@@ -200,6 +202,12 @@ module.exports = {
           'not ie < 9', // React doesn't support IE8 anyway
         ]
       }),
+      cssvars({
+        variables: function () {
+            return Object.assign({}, cssvariables);
+        },
+        silent: true
+      }),
     ];
   },
   plugins: [

src/App.js

@@ -7,7 +7,7 @@ import contract from 'truffle-contract'
 import TextField from './components/forms/TextField'
 import Page from './components/layout/Page'
 import PageFrame from './components/layout/PageFrame'
-import './App.css'
+import './App.scss'
 
 class App extends Component {
   constructor(props) {

src/App.scss

@@ -1,6 +1,6 @@
 body {
   font-family: 'Montserrat', sans-serif;
-  color: $(secondary);
+  color: $secondary;
   background-color: #f0f1f3;
 }
 

src/components/Header/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from './index.css';
+import styles from './index.scss';
 
 const Header = () => (
   <header className={styles.header}>

src/components/layout/Page/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Header from '../../Header'
-import styles from './index.css';
+import styles from './index.scss';
 
 const Page = ({children}) => (
   <div className={styles.page}>

src/components/layout/PageFrame/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from './index.css';
+import styles from './index.scss';
 
 const PageFrame = ({ children }) => (
   <main className={styles.container}>

src/index.css

@@ -1,5 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}