diff --git a/.gitignore b/.gitignore
index fc65e15000c2163da22b281b4d263aa8a905ce3a..77b69b2bb6252546e196d5a062ea43719998cb40 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,4 @@ yarn-error.log*
 /.storybook
 /src/stories
 /src/styles/whatsOpen.css
+/src/styles/build
diff --git a/package.json b/package.json
index 7fa0996eff53c965a9954748d365745d245e86cb..a5840c0166266ed93063cb4adf4693a467f87721 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   },
   "proxy": "http://localhost:3001",
   "scripts": {
-    "build-css": "node-sass-chokidar src/styles/whatsOpen.scss -o src/styles/",
+    "build-css": "node-sass-chokidar src/styles/ -o src/styles/build",
     "watch-css": "npm run build-css --watch --recursive",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",
diff --git a/src/index.js b/src/index.js
index 8d01c4b2397ce9dacce6843d2a3dd4a16ae78f94..e15ac3a8c0a52a810af7dabf8e624f28b025cf58 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,7 +11,7 @@ import ReduxThunk from 'redux-thunk';
 import reducers from './reducers/index';
 import {MuiThemeProvider} from 'material-ui/styles';
 import theme from './theme';
-import './styles/whatsOpen.css';
+import './styles/build/whatsOpen.css';
 
 // Create a history of your choosing (we're using a browser history in this case)
 const history = createHistory();
diff --git a/src/styles/components/favoriteButton.scss b/src/styles/components/favoriteButton.scss
index 8ca98ce2718cbe15495d3cb769715ec391be4501..03256d67df7f533506c6867a61910ef194025e86 100644
--- a/src/styles/components/favoriteButton.scss
+++ b/src/styles/components/favoriteButton.scss
@@ -1,3 +1,5 @@
+@import '../_variables.scss';
+
 .favorite-button-heart {
   position: absolute;
   top: 0;
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
index 389c979f232adfbdbdaf3974f72ce6b89a8bea49..f4ddc450d095558f497c1a3ff685510cdc0a59c6 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -1,3 +1,6 @@
+@import '../_variables.scss';
+@import '../_mixins.scss';
+
 .sidebar-label-row {
   display: flex;
 }
diff --git a/src/styles/containers/facilityCard.scss b/src/styles/containers/facilityCard.scss
index 517f8fbec01507804cff30824bb235d024d044e5..fede8ab18af4fbf6add550dddf5a8bb1d9fb9eca 100644
--- a/src/styles/containers/facilityCard.scss
+++ b/src/styles/containers/facilityCard.scss
@@ -1,3 +1,5 @@
+@import '../_variables.scss';
+
 .fc-root {
   width: 250px;
   border-radius: 5px !important;