preparing for sass

index.html

@@ -5,13 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Chaotic Backup</title>
     <meta name="description" content="Chaotic Backup">
+    <link rel="stylesheet" type="text/css" href="public/style.css">
     <link rel="stylesheet" type="text/css" href="/src/css/legacy.css">
     <style>
       html, body, div, span, a, p, ul, li, h1, code, nav {
         margin: 0;
         border: 0;
         padding: 0;
-        box-sizing: inherit;
+        /*box-sizing: inherit;*/
 /*        font: inherit;*/
         text-decoration: inherit;
         text-align: inherit;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chaoticbackup",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Chaotic Backup",
   "scripts": {
     "start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback --progress",
@@ -18,13 +18,14 @@
     "mobx-react": "^4.3.3",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
+    "react-collapsible": "^2.0.4",
     "react-digit-input": "^1.0.0",
     "react-dom": "^16.0.0",
     "react-interactive": "^0.8.1",
     "react-process-string": "^1.2.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "react-transition-group": "^1.2.1",
+    "react-transition-group": "^2.2.1",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
@@ -36,11 +37,16 @@
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-1": "^6.16.0",
+    "css-loader": "^0.28.10",
     "eslint": "^4.0.0",
     "eslint-config-airbnb": "^16.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.0",
     "eslint-plugin-react": "^7.0.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "node-sass": "^4.x",
+    "sass-loader": "^4.x",
+    "style-loader": "^0.20.2",
     "webpack": "^1.14.0",
     "webpack-dev-server": "^1.16.2"
   }

webpack.config.babel.js

@@ -1,6 +1,8 @@
 import webpack from 'webpack';
 import path from 'path';
 
+let ExtractTextPlugin = require('extract-text-webpack-plugin');
+
 export default {
   entry: ['babel-polyfill', `${__dirname}/src/components/index.js`],
   output: {
@@ -11,7 +13,14 @@ export default {
 
   module: {
     loaders: [
-      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel' },
+      {
+        test: /\.jsx?$/, exclude: /node_modules/,
+        loader: 'babel'
+      },
+      {
+        test: /\.scss$/,
+        loader: ExtractTextPlugin.extract('css!sass')
+      },
     ],
   },
 
@@ -20,7 +29,7 @@ export default {
   },
 
   node: {
-    fs: 'empty'
+    fs: 'empty',
   },
 
   plugins: process.argv.indexOf('-p') === -1 ? null : [
@@ -32,5 +41,8 @@ export default {
         comments: false,
       },
     }),
+    new ExtractTextPlugin('public/style.css', {
+        allChunks: true
+    }),
   ],
 };