diff --git a/.gitignore b/.gitignore
index c4703bbeb9ed4..cf964661fdb6f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,9 +24,12 @@ build/Release
 
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
-node_modules
+node_modules/
 examples/biz-website/public/
 examples/blog/public/
 *.un~
-dist
+dist/
 bin/published.js
+
+# IDEA/WebStorm configuration directory
+.idea/
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
index 6f3b469260a0e..a8a521f216a28 100644
--- a/.npmignore
+++ b/.npmignore
@@ -27,4 +27,4 @@ build/Release
 node_modules
 examples/biz-website/public/
 examples/blog/public/
-*.un~
+*.un~
\ No newline at end of file
diff --git a/lib/utils/webpack.config.js b/lib/utils/webpack.config.js
index 011b0605197c1..24a30c0eaebbe 100644
--- a/lib/utils/webpack.config.js
+++ b/lib/utils/webpack.config.js
@@ -112,7 +112,7 @@ module.exports = (program, directory, stage, webpackPort = 1500, routes = []) =>
 
   function resolve () {
     return {
-      extensions: ['', '.js', '.jsx', '.cjsx', '.coffee', '.json', '.less', '.toml', '.yaml'],
+      extensions: ['', '.js', '.jsx', '.cjsx', '.coffee', '.json', '.less', '.scss', '.sass', '.toml', '.yaml'],
       modulesDirectories: [
         directory,
         `${__dirname}/../isomorphic`,
@@ -207,6 +207,10 @@ module.exports = (program, directory, stage, webpackPort = 1500, routes = []) =>
           test: /\.less/,
           loaders: ['style', 'css', 'less'],
         })
+        config.loader('sass', {
+          test: /\.(sass|scss)/,
+          loaders: ['style', 'css', 'sass'],
+        })
         config.loader('js', {}, (cfg) => {
           cfg.loaders.unshift('react-hot')
           return cfg
@@ -226,6 +230,10 @@ module.exports = (program, directory, stage, webpackPort = 1500, routes = []) =>
           test: /\.less/,
           loaders: ['css', 'less'],
         })
+        config.loader('sass', {
+          test: /\.(sass|scss)/,
+          loaders: ['css', 'sass'],
+        })
         return config
 
       case 'production':
@@ -237,7 +245,10 @@ module.exports = (program, directory, stage, webpackPort = 1500, routes = []) =>
           test: /\.less/,
           loaders: ['style', 'css', 'less'],
         })
-
+        config.loader('sass', {
+          test: /\.(sass|scss)/,
+          loaders: ['style', 'css', 'sass'],
+        })
         return config
 
       default:
diff --git a/package.json b/package.json
index d997644280b3b..f28379729fd16 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "negotiator": "^0.5.3",
     "node-cjsx": "^1.0.0",
     "node-libs-browser": "^0.5.2",
+    "node-sass": "^3.4.2",
     "null-loader": "^0.1.1",
     "object-assign": "^4.0.1",
     "parse-filepath": "^0.5.0",
@@ -49,6 +50,7 @@
     "react-hot-loader": "^1.2.7",
     "react-router": "^0.13.5",
     "rimraf": "^2.4.2",
+    "sass-loader": "^3.1.2",
     "static-site-generator-webpack-plugin": "^1.0.0",
     "style-loader": "^0.13.0",
     "toml": "^2.2.2",