Add scss support

- Added https://github.com/jtangelder/sass-loader - Sample sass files to demonstrate how to work with multiple sass files

Author: monicao

package.json

@@ -31,8 +31,12 @@
  "babel-preset-es2015": "6.9.0",
  "babel-preset-react": "6.11.1",
  "babel-preset-stage-0": "6.5.0",
+ "css-loader": "0.23.1",
  "eslint": "2.7.0",
  "eslint-plugin-react": "5.2.2",
+ "node-sass": "3.8.0",
+ "sass-loader": "4.0.0",
+ "style-loader": "0.13.1",
  "webpack": "1.13.1",
  "webpack-dev-server": "1.14.1"
  },

src/index.jsx

@@ -1,3 +1,9 @@
+// Application entrypoint.
+
+// Load up the application styles
+require("../styles/application.scss");
+
+// Render the top-level React component
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.jsx';

styles/application.scss

@@ -0,0 +1,2 @@
+// This is the top-level scss file. Import all other files in here.
+@import 'home';

styles/home.scss

@@ -0,0 +1,3 @@
+h1 {
+ color: tomato;
+}

webpack.config.js

@@ -13,10 +13,16 @@ module.exports = {
  publicPath: '/build/'
  },
  module: {
- loaders: [{
- test: /\.jsx?$/,
- loaders: ['babel'],
- include: path.join(__dirname, 'src')
- }]
+ loaders: [
+ {
+ test: /\.jsx?$/,
+ loaders: ['babel'],
+ include: path.join(__dirname, 'src')
+ },
+ {
+ test: /\.scss$/,
+ loaders: ["style", "css", "sass"]
+ }
+ ]
  }
 }