diff --git a/package.json b/package.json
index 0faedce..b22f0bb 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,10 @@
     "babel-runtime": "^6.3.19",
     "babelify": "^7.1.0",
     "canopy": "^0.2.0",
+    "css-loader": "^0.25.0",
+    "docco": "^0.7.0",
+    "extract-loader": "0.0.2",
+    "file-loader": "^0.9.0",
     "folder-toc": "^0.1.0",
     "gulp": "^3.8.10",
     "gulp-connect": "^4.2.0",
@@ -44,6 +48,8 @@
     "karma-webpack": "^1.8.0",
     "lodash": "^4.6.1",
     "node-bourbon": "^4.2.3",
+    "node-sass": "^3.10.1",
+    "sass-loader": "^4.0.2",
     "snapsvg": "^0.4.0",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
diff --git a/webpack.config.js b/webpack.config.js
index 6ff848f..108fb5d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,9 +1,11 @@
-var webpack = require('webpack');
+var webpack = require('webpack'),
+    bourbon = require('bourbon');
 
 module.exports = {
   devtool: 'source-map',
   entry: {
-    'js/main.js': './src/js/main.js'
+    'js/main.js': './src/js/main.js',
+    'css/main.css.js': './src/sass/main.scss'
   },
   output: {
     path: __dirname + '/build',
@@ -30,6 +32,11 @@ module.exports = {
       {
         test: /\.peg$/,
         loader: __dirname + '/lib/canopy-loader'
+      },
+      {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        loader: 'file?name=css/[name].css!extract!css!sass?includePaths[]=' + bourbon.includePaths
       }
     ]
   }