CSS Module undefined error files

base.scss

@import "../css/_colors";

:global {
  html, body {
    margin: 0;
    padding: 0;
  }

  html {
    height: 100%;
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-height: 100vh;
  }
}

.app-container {
  flex: 1;
  background-color: $app-background;
  background-size: cover;

  > :first-child {
    padding-top: 1rem;
    margin-bottom: 1rem;
  }

  > * {
    padding: 0 1rem;
  }
}

.launch-container {
  flex: 1;
  .main {
    flex: 1 0 auto;
  }
}

Button.jsx

import React, {PropTypes} from 'react';
import CSSModules from 'react-css-modules';

import BaseComponent from '../BaseComponent';

import styles from './button.scss';

class Button extends BaseComponent {

  static displayName = 'Button';
  static propTypes = {
    className: PropTypes.string,
    onClick: PropTypes.func,
    styleName: PropTypes.string,
    text: PropTypes.string
  };
  static defaultProps = {
    className: '',
    onClick: () => {},
    styleName: 'primary',
    text: ''
  };

  render() {
    return (
      <button
          styleName={this.props.styleName}
          onClick={this.props.onClick}>
        {this.props.text}
      </button>
    );
  }
}

export default CSSModules(Button, styles);

button.scss

@import '../../css/_colors';

.primary {
  background-color: $button-primary;
  border: none;
  border-radius: 50px;
  min-width: 155px;
  min-height: 37px;
  font-size: 14px;
  color: #FFFFFF;
}

.review {
  @extend .primary;
  background-color: $button-review;
}

.lesson {
  @extend .primary;
  background-color: $button-lesson;
}

LaunchContainer.jsx

import CSSModules from 'react-css-modules';
import React from 'react';

import ActivityDrawer from '../shared/ActivityDrawer';
import BaseComponent from '../shared/BaseComponent';
import Button from '../shared/baseButton/Button';
import DoughnutChart from '../shared/DoughnutChart';
import LaunchHeadline from '../shared/launchHeadLine/LaunchHeadline';
import TrainingSummaryText from '../shared/TrainingSummaryText';

import baseStyles from '../css/base.scss';

/* This is the base*/
class LaunchContainer extends BaseComponent {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div styleName="launch-container">
        <main styleName="main">
          <DoughnutChart/>
          <LaunchHeadline/>
          <TrainingSummaryText />
          <Button />
        </main>
        <footer>
          <ActivityDrawer />
        </footer>
      </div>
    );
  }
}
module.exports = CSSModules(LaunchContainer, baseStyles);

stack-trace

generateAppendClassName.js:40 Uncaught Error: "primary" CSS module is undefined.

exports.default @ generateAppendClassName.js:40
linkElement @ linkClass.js:63
(anonymous function) @ linkClass.js:55
mapSingleChildIntoContext @ ReactChildren.js:108
traverseAllChildrenImpl @ traverseAllChildren.js:67
traverseAllChildrenImpl @ traverseAllChildren.js:83
traverseAllChildren @ traverseAllChildren.js:155
mapIntoWithKeyPrefixInternal @ ReactChildren.js:128
mapChildren @ ReactChildren.js:150
linkElement @ linkClass.js:53(anonymous function) @ linkClass.js:55
mapSingleChildIntoContext @ ReactChildren.js:108
traverseAllChildrenImpl @ traverseAllChildren.js:67
traverseAllChildrenImpl @ traverseAllChildren.js:83
traverseAllChildren @ traverseAllChildren.js:155
mapIntoWithKeyPrefixInternal @ ReactChildren.js:128
mapChildren @ ReactChildren.js:150
linkElement @ linkClass.js:53
exports.default @ linkClass.js:99
render @ extendReactClass.js:80
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:815
_renderValidatedComponent @ ReactCompositeComponent.js:841
performInitialMount @ ReactCompositeComponent.js:351
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
mountChildren @ ReactMultiChild.js:215
_createInitialChildren @ ReactDOMComponent.js:649
mountComponent @ ReactDOMComponent.js:489
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
mountComponentIntoNode @ ReactMount.js:102
perform @ Transaction.js:136
batchedMountComponentIntoNode @ ReactMount.js:123
perform @ Transaction.js:136
batchedUpdates @ ReactDefaultBatchingStrategy.js:63
batchedUpdates @ ReactUpdates.js:98
_renderNewRootComponent @ ReactMount.js:286
_renderSubtreeIntoContainer @ ReactMount.js:365
render @ ReactMount.js:386
(anonymous function) @ index.js:81
(anonymous function) @ website.js:2890
__webpack_require__ @ website.js:583
fn @ website.js:107
(anonymous function) @ multi_website:2
(anonymous function) @ website.js:636
__webpack_require__ @ website.js:583
(anonymous function) @ website.js:629
(anonymous function) @ website.js:632

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');
const ForceCaseSensitivityPlugin = require('force-case-sensitivity-webpack-plugin');

module.exports = {
  devtool: 'eval',
  context: __dirname, // eslint-disable-line no-undef
  entry: {
    website: [
      'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr',
      './client/index'
    ]
  },
  output: {
    path: path.resolve('./assets/bundles/'),
    filename: '[name].js',
    // Tell django to use this URL to load packages and not use STATIC_URL + bundle_name
    publicPath: 'http://localhost:3000/assets/bundles/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(), // don't reload if there is an error
    new BundleTracker({filename: './webpack-stats.json'}),
    new ForceCaseSensitivityPlugin()
  ],
  module: {
    loaders: [{
      test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'file-loader'
    }, {
      test: /\.css$/,
      loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
        'autoprefixer?browsers=last 10 versions'
      ]
    }, {
      test: /\.scss$/,
      loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
        'autoprefixer?browsers=last 10 versions',
        'sass?sourceMap'
      ]
    }, {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url-loader?limit=464600&minetype=application/font-woff'
    }, {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loaders: ['babel-loader']
    }]
  },
  resolve: {
    modulesDirectories: ['./client/logger/', './client/components/shared/', 'node_modules'],
    extensions: ['', '.js', '.jsx']
  }
}