Merge pull request #1 from alicoding/master

Integrates latest from alicoding

package.json

@@ -16,15 +16,21 @@
   "license": "MIT",
   "homepage": "https://github.com/alicoding/react-webpack-babel#readme",
   "dependencies": {
-    "bootstrap": "3.3.7",
+    "bootstrap": "^4.0.0-alpha.3",
+    "node-sass": "^3.8.0",
     "react": "15.3.0",
-    "react-dom": "15.3.0"
+    "react-dom": "15.3.0",
+    "sass-loader": "^4.0.0"
   },
   "devDependencies": {
     "babel-core": "6.13.2",
     "babel-loader": "6.2.4",
+    "babel-plugin-transform-class-properties": "^6.11.5",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-runtime": "^6.12.0",
     "babel-preset-es2015": "6.13.2",
     "babel-preset-react": "6.11.1",
+    "babel-runtime": "^6.11.6",
     "css-loader": "0.23.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "0.9.0",

src/index.jsx

@@ -1,5 +1,5 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
-import styles from './index.css';
+import styles from './index.scss';
 import React from 'react';
 import { render } from 'react-dom';
 

webpack.config.js

@@ -15,9 +15,19 @@ loaders.push({
 		'css'
 	]
 });
+// local scss modules
+loaders.push({
+	test: /[\/\\]src[\/\\].*\.scss/,
+	loaders: [
+		'style?sourceMap',
+		'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
+		'sass'
+	]
+});
+
 // local css modules
 loaders.push({
-	test: /[\/\\]src[\/\\].*\.css$/,
+	test: /[\/\\]src[\/\\].*\.css/,
 	loaders: [
 		'style?sourceMap',
 		'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'

webpack.loaders.js

@@ -2,34 +2,50 @@ module.exports = [
 	{
 		test: /\.jsx?$/,
 		exclude: /(node_modules|bower_components)/,
-		loaders: ['react-hot', 'babel'],
+		loaders: ['react-hot']
+	},
+	{
+		test: /\.jsx?$/,
+		exclude: /(node_modules|bower_components)/,
+		loader: 'babel',
+		query: {
+		  presets: ['es2015', 'react'],
+		  plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
+		}
 	},
 	{
 		test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+		exclude: /(node_modules|bower_components)/,
 		loader: "file"
 	},
 	{
 		test: /\.(woff|woff2)$/,
+		exclude: /(node_modules|bower_components)/,
 		loader: "url?prefix=font/&limit=5000"
 	},
 	{
 		test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+		exclude: /(node_modules|bower_components)/,
 		loader: "url?limit=10000&mimetype=application/octet-stream"
 	},
 	{
 		test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+		exclude: /(node_modules|bower_components)/,
 		loader: "url?limit=10000&mimetype=image/svg+xml"
 	},
 	{
 		test: /\.gif/,
+		exclude: /(node_modules|bower_components)/,
 		loader: "url-loader?limit=10000&mimetype=image/gif"
 	},
 	{
 		test: /\.jpg/,
+		exclude: /(node_modules|bower_components)/,
 		loader: "url-loader?limit=10000&mimetype=image/jpg"
 	},
 	{
 		test: /\.png/,
+		exclude: /(node_modules|bower_components)/,
 		loader: "url-loader?limit=10000&mimetype=image/png"
 	}
 ];

webpack.production.config.js

@@ -7,9 +7,15 @@ var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 
 // local css modules
 loaders.push({
-	test: /[\/\\]src[\/\\].*\.css$/,
+	test: /[\/\\]src[\/\\].*\.css/,
 	loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
 });
+
+// local scss modules
+loaders.push({
+	test: /[\/\\]src[\/\\].*\.scss/,
+	loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'sass')
+});
 // global css files
 loaders.push({
 	test: /[\/\\](node_modules|global)[\/\\].*\.css$/,