Merge branch 'scss' into source

Author: michaeljqzq

config/webpack.config.dev.js

@@ -115,6 +115,7 @@ module.exports = {
  // https://github.com/facebookincubator/create-react-app/issues/1713
  /\.(js|jsx)(\?.*)?$/,
  /\.css$/,
+ /\.scss$/,
  /\.json$/,
  /\.svg$/
  ],
@@ -147,6 +148,10 @@ module.exports = {
  // "style" loader turns CSS into JS modules that inject <style> tags.
  // In production, we use a plugin to extract that CSS to a file, but
  // in development "style" loader enables hot editing of CSS.
+ {
+ test: /\.scss$/,
+ loader: 'style!css!sass?importLoaders=1!postcss'
+ },
  {
  test: /\.css$/,
  loader: 'style!css?importLoaders=1!postcss'

package.json

@@ -7,13 +7,15 @@
  "azure-iot-common": "^1.1.6",
  "azure-iot-device": "1.1.7",
  "bootstrap": "^3.3.7",
+ "node-sass": "^4.5.3",
  "paho-mqtt": "^1.0.3",
  "react": "^15.5.4",
  "react-ace": "^4.2.1",
  "react-bootstrap": "^0.30.9",
  "react-console-component": "^0.6.1",
  "react-dom": "^15.5.4",
  "react-ga": "^2.2.0",
+ "sass-loader": "^6.0.6",
  "uuid": "^3.0.1"
  },
  "devDependencies": {

src/component/helpOverlay/helpOverlay.css

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { traceEvent } from '../../lib/telemetry.js';
-import './helpOverlay.css';
+import './helpOverlay.scss';
 import closeButton from '../../img/closeButton.png';
 // import connectionStringInPortal from '../../img/connectionStringInPortal.png';
 import img1 from '../../img/step1.png';