diff --git a/.gitignore b/.gitignore
index 2806eedff1..2abed01fe1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+/build
 /cert.pem
 /karma-reports
 /key.pem
@@ -5,7 +6,6 @@
 /node_modules
 /packages/
 /vector/bundle.*
-/vector/components.css
 /vector/emojione/
 /vector/config.json
 /vector/olm.*
diff --git a/package.json b/package.json
index d6a631707b..95eff53184 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "reskindex": "reskindex -h src/header",
     "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --no-watch",
+    "build:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css --no-watch",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p --progress",
     "build:bundle:dev": "webpack --optimize-occurence-order --progress",
@@ -24,11 +24,11 @@
     "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w",
     "start:js": "webpack -w --progress",
     "start:js:prod": "NODE_ENV=production webpack -w --progress",
-    "start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css",
+    "start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
     "//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
     "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
     "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "clean": "rimraf lib vector/olm.* vector/bundle.* vector/emojione",
+    "clean": "rimraf build lib vector/olm.* vector/bundle.* vector/emojione",
     "prepublish": "npm run build:css && npm run build:compile",
     "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
     "test:multi": "karma start"
@@ -90,6 +90,7 @@
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
+    "mkdirp": "^0.5.1",
     "mocha": "^2.4.5",
     "parallelshell": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.7",
diff --git a/src/vector/index.js b/src/vector/index.js
index b33693f6b4..58d579fdf4 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -29,8 +29,8 @@ limitations under the License.
 require('babel-polyfill');
 
 // CSS requires: just putting them here for now as CSS is going to be
-// refactored soon anyway
-require('../../vector/components.css');
+// refactored "soon" anyway
+require('../../build/components.css');
 require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');