Enabling CSS in modules in development mode

config/webpack.config.dev.js

@@ -134,15 +134,19 @@ module.exports = {
           cacheDirectory: true
         }
       },
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader?importLoaders=1!postcss&modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
+      },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.
       // "style" loader turns CSS into JS modules that inject <style> tags.
       // In production, we use a plugin to extract that CSS to a file, but
       // in development "style" loader enables hot editing of CSS.
-      {
+      /*{
         test: /\.css$/,
         loader: 'style!css?importLoaders=1!postcss'
-      },
+      },*/
       // JSON is not enabled by default in Webpack but both Node and Browserify
       // allow it implicitly so we also enable it.
       {

src/components/Header/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import './index.css'
+import styles from './index.css';
 
 const Header = () => (
-  <header className="header">
+  <header className={styles.header}>
     <h1>GNOSIS DAPP BOILERPLATE</h1>
     <div>Multisig 2.0</div>
   </header>

src/components/layout/Page/index.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import Header from '../../Header'
-import './index.css'
+import styles from './index.css';
 
 const Page = ({children}) => (
-  <div className="page">
+  <div className={styles.page}>
     <Header />
     {children}
   </div>

src/components/layout/PageFrame/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import './index.css'
+import styles from './index.css';
 
 const PageFrame = ({ children }) => (
-  <main className="container">
+  <main className={styles.container}>
     { children }
   </main>
 )