sass compilation added

Author: jackreichert

bundle.js

@@ -68,6 +68,8 @@
 
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+	__webpack_require__(332);
+
 	_reactDom2.default.render(_react2.default.createElement(
 	    _reactRedux.Provider,
 	    { store: _store2.default },
@@ -34135,7 +34137,7 @@
 
 	var _posts_reducer2 = _interopRequireDefault(_posts_reducer);
 
-	var _menu_reducer = __webpack_require__(332);
+	var _menu_reducer = __webpack_require__(331);
 
 	var _menu_reducer2 = _interopRequireDefault(_menu_reducer);
 
@@ -34172,8 +34174,7 @@
 	var _actions = __webpack_require__(273);
 
 /***/ },
-/* 331 */,
-/* 332 */
+/* 331 */
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
@@ -34195,5 +34196,11 @@
 
 	var _actions = __webpack_require__(273);
 
+/***/ },
+/* 332 */
+/***/ function(module, exports) {
+
+	// removed by extract-text-webpack-plugin
+
 /***/ }
 /******/ ]);

lib/theme-enqueue.php

@@ -27,7 +27,7 @@ function theme() {
 				'nonce' => wp_create_nonce( 'wp_rest' ),
 				'siteName' => get_bloginfo('name')
 			) );
-			wp_enqueue_style(get_stylesheet(),get_stylesheet_uri());
+			wp_enqueue_style(get_stylesheet(),get_template_directory_uri() . '/bundle.css');
 		}
 	}
 

package.json

@@ -16,6 +16,10 @@
     "babel-preset-es2015": "^6.18",
     "babel-preset-react": "^6.16",
     "babel-preset-stage-2": "^6.18",
+    "css-loader": "^0.26.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "node-sass": "^4.3.0",
+    "postcss-loader": "^1.2.2",
     "react": "^15.4",
     "react-addons-css-transition-group": "^15.4.2",
     "react-dom": "^15.4",
@@ -25,6 +29,8 @@
     "redux-logger": "^2.7.4",
     "redux-promise-middleware": "^4.2.0",
     "redux-thunk": "^2.1.0",
+    "sass-loader": "^4.1.1",
+    "style-loader": "^0.13.1",
     "webpack": "^1.14"
   }
 }

src/index.js

@@ -1,3 +1,5 @@
+require('./sass/style.scss');
+
 import React from 'react';
 import ReactDom from 'react-dom';
 import {Provider} from 'react-redux';

style.css

@@ -2,26 +2,3 @@
 Theme Name: React theme
 Author: Jack Reichert
 */
-
-.fade-enter {
-    opacity: 0;
-}
-
-.fade-enter-active {
-    opacity: 1.0;
-    transition: 0.5s ease-in all;
-}
-
-.fade-leave {
-    opacity: 1.0;
-}
-
-.fade-leave-active {
-    opacity: 0;
-    transition: .01s ease-in all;
-}
-
-img {
-    max-width: 100%;
-    height: auto;
-}

webpack.config.js

@@ -1,16 +1,30 @@
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const autoPrefixer = require('autoprefixer');
+
 module.exports = {
-  entry: './src/index.js',
-  output: { path: __dirname, filename: 'bundle.js' },
-  module: {
-    loaders: [
-      {
-        test: /.jsx?$/,
-        exclude: /(node_modules|bower_components)/,
-        loader: 'babel-loader',
-        query: {
-          presets: ['es2015', 'stage-2', 'react']
-        }
-      }
-    ]
-  }
+    entry: './src/index.js',
+    output: {
+        path: __dirname,
+        filename: 'bundle.js'
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.jsx?$/,
+                exclude: /(node_modules|bower_components)/,
+                loader: 'babel-loader',
+                query: {
+                    presets: ['es2015', 'stage-2', 'react']
+                }
+            },
+            {
+                test: /\.scss$/,
+                loader: ExtractTextPlugin.extract('style-loader', 'css!sass!postcss?sourceMap')
+            }
+        ]
+    },
+    plugins: [
+        new ExtractTextPlugin("bundle.css", {allChunks: true})
+    ],
+    postcss: [autoPrefixer({browsers: ['last 3 versions']})]
 };