diff --git a/README.md b/README.md
index a9b8b45f7..f4ba1530c 100755
--- a/README.md
+++ b/README.md
@@ -101,16 +101,12 @@ if(__CLIENT__) {
 This project uses [local styles](https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284) using [css-loader](https://github.com/webpack/css-loader). The way it works is that you import your stylesheet at the top of the class with your React Component, and then you use the classnames returned from that import. Like so:
 
 ```javascript
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./App.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[path.join(__dirname, './App.scss')];
-})();
+const styles = __CLIENT__ ?
+  require('./App.scss') :
+  requireServerCss(require.resolve('./App.scss'));
 ```
 
-That's a little ugly, I know, but what it allows is very powerful.
+Then you set the `className` of your element ot match one of the CSS classes in your SCSS file, and you're good to go!
 
 ```jsx
 <div className={styles.mySection}> ... </div>
diff --git a/src/components/InfoBar.js b/src/components/InfoBar.js
index e329f3cf4..47fbebd2f 100755
--- a/src/components/InfoBar.js
+++ b/src/components/InfoBar.js
@@ -1,17 +1,10 @@
-import path from 'path';
 import React, {Component, PropTypes} from 'react';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import * as infoActions from '../actions/infoActions';
-import {relativeToSrc} from '../util';
+import {requireServerCss} from '../util';
 
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./InfoBar.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[relativeToSrc(path.join(__dirname, './InfoBar.scss'))];
-})();
+const styles = __CLIENT__ ? require('./InfoBar.scss') : requireServerCss(require.resolve('./InfoBar.scss'));
 
 class InfoBar extends Component {
   static propTypes = {
diff --git a/src/util.js b/src/util.js
index a238d1f69..7c6ef5e58 100755
--- a/src/util.js
+++ b/src/util.js
@@ -1,9 +1,18 @@
-import path from 'path';
-
-const pathToSrc = path.resolve(__dirname, '.');
+const readStats = () => {
+  // don't cache the `webpack-stats.json` on dev so we read the file on each request.
+  // on production, use simple `require` to cache the file
+  const stats = require('../webpack-stats.json');
+  if (__DEVELOPMENT__) {
+    delete require.cache[require.resolve('../webpack-stats.json')];
+  }
+  return stats;
+}
 
-export function relativeToSrc(value) {
-  return value.slice(pathToSrc.length);
+export function requireServerCss(cssPath) {
+  if (__CLIENT__) {
+    throw new Error('image-resolver called on browser');
+  }
+  return readStats().css.modules[cssPath.slice(__dirname.length)];
 }
 
 export function requireServerImage(imagePath) {
@@ -11,28 +20,20 @@ export function requireServerImage(imagePath) {
     return '';
   }
   if (__CLIENT__) {
-    throw new Error('image-resolver called on browser');
-  } else {
-    // Load images compiled from `webpack-stats`
-    // don't cache the `webpack-stats.json` on dev
-    // so we gonna read the file on each request
-    // on production, use simple `require` to cache the file
-    let images = require('../webpack-stats.json').images;
-    if (__DEVELOPMENT__) {
-      delete require.cache[require.resolve('../webpack-stats.json')];
-    }
-    if (!images) {
-      return '';
-    }
+    throw new Error('server-side only resolver called on client');
+  }
+  const images = readStats().images;
+  if (!images) {
+    return '';
+  }
 
-    // Find the correct image
-    const regex = new RegExp(`${imagePath}$`);
-    const image = images.find(img => regex.test(img.original));
+  // Find the correct image
+  const regex = new RegExp(`${imagePath}$`);
+  const image = images.find(img => regex.test(img.original));
 
-    // Serve image.
-    if (image) return image.compiled;
+  // Serve image.
+  if (image) return image.compiled;
 
-    // Serve a not-found asset maybe?
-    return '';
-  }
+  // Serve a not-found asset maybe?
+  return '';
 }
diff --git a/src/views/App.js b/src/views/App.js
index e53c711db..2cc14d0cb 100755
--- a/src/views/App.js
+++ b/src/views/App.js
@@ -10,15 +10,9 @@ import * as authActions from '../actions/authActions';
 import {load as loadAuth} from '../actions/authActions';
 import InfoBar from '../components/InfoBar';
 import {createTransitionHook} from '../universalRouter';
-import {relativeToSrc} from '../util';
+import {requireServerCss} from '../util';
 
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./App.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[relativeToSrc(path.resolve(__dirname, './App.scss'))];
-})();
+const styles = __CLIENT__ ? require('./App.scss') : requireServerCss(require.resolve('./App.scss'));
 
 class App extends Component {
   static propTypes = {
@@ -43,6 +37,7 @@ class App extends Component {
 
   render() {
     const {user} = this.props;
+    debugger;
     return (
       <div className={styles.app}>
         <nav className="navbar navbar-default navbar-fixed-top">
diff --git a/src/views/Home.js b/src/views/Home.js
index d144f10de..875a73a53 100755
--- a/src/views/Home.js
+++ b/src/views/Home.js
@@ -1,16 +1,9 @@
 import React, {Component} from 'react';
-import path from 'path';
 import CounterButton from '../components/CounterButton';
 import GithubButton from '../components/GithubButton';
-import {relativeToSrc, requireServerImage} from '../util';
+import {requireServerCss, requireServerImage} from '../util';
 
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./Home.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[relativeToSrc(path.resolve(__dirname, './Home.scss'))];
-})();
+const styles = __CLIENT__ ? require('./Home.scss') : requireServerCss(require.resolve('./Home.scss'));
 
 // require the logo image both from client and server
 let logoImage = '';
diff --git a/src/views/Login.js b/src/views/Login.js
index 026e7511b..df314b409 100755
--- a/src/views/Login.js
+++ b/src/views/Login.js
@@ -1,19 +1,12 @@
-import path from 'path';
 import React, {Component, PropTypes} from 'react';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import {isLoaded as isAuthLoaded} from '../reducers/auth';
 import * as authActions from '../actions/authActions';
 import {load as loadAuth} from '../actions/authActions';
-import {relativeToSrc} from '../util';
+import {requireServerCss} from '../util';
 
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./Login.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[relativeToSrc(path.join(__dirname, './Login.scss'))];
-})();
+const styles = __CLIENT__ ? require('./Login.scss') : requireServerCss(require.resolve('./Login.scss'));
 
 class Login extends Component {
   static propTypes = {
diff --git a/src/views/Widgets.js b/src/views/Widgets.js
index 2dfd1ce64..6282a1bd6 100755
--- a/src/views/Widgets.js
+++ b/src/views/Widgets.js
@@ -1,19 +1,12 @@
-import path from 'path';
 import React, {Component, PropTypes} from 'react';
 import {bindActionCreators} from 'redux';
 import {isLoaded} from '../reducers/widgets';
 import {connect} from 'react-redux';
 import * as widgetActions from '../actions/widgetActions';
 import {load as loadWidgets} from '../actions/widgetActions';
-import {relativeToSrc} from '../util';
+import {requireServerCss} from '../util';
 
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./Widgets.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[relativeToSrc(path.join(__dirname, './Widgets.scss'))];
-})();
+const styles = __CLIENT__ ? require('./Widgets.scss') : requireServerCss(require.resolve('./Widgets.scss'));
 
 class Widgets extends Component {
   static propTypes = {
diff --git a/webpack/utils/writeStats.js b/webpack/utils/writeStats.js
index 238265502..9dc2a9d05 100755
--- a/webpack/utils/writeStats.js
+++ b/webpack/utils/writeStats.js
@@ -40,16 +40,17 @@ module.exports = function writeStats(stats, env) {
     if (env === 'prod') {
       return /\.scss$/.test(m.name);
     }
-
     return m.name.slice(0, namePrefix.length) === namePrefix;
   }).forEach(function(m) {
     var name = path.resolve(__dirname, '../../', env === 'prod' ?
       m.name.slice('./src'.length) :
       m.name.slice(namePrefix.length + './src'.length));
-    //Resolve the e.g.:"C:\"  issue on windows
     if (name) {
-      const i = name.indexOf(":");
-      name = name.substring(i > -1 ? i + 1 : 0, name.length + 1);
+      // Resolve the e.g.: "C:\"  issue on windows
+      const i = name.indexOf(':');
+      if (i >= 0) {
+        name = name.slice(i + 1);
+      }
     }
     //end
     var regex = env === 'prod' ? /module\.exports = ((.|\n)+);/ : /exports\.locals = ((.|\n)+);/;