css module

client/components/App.jsx

 import React from 'react';
 import React from 'react';
-import '../main.scss';
+import styles from '../main.scss';
 
 
 export default class App extends React.Component {
 export default class App extends React.Component {
   render() {
   render() {
     return (
     return (
-     <div className='text-center'>
+     <div className={styles.textcenter}>
         <h1>Hello World</h1>
         <h1>Hello World</h1>
       </div>);
       </div>);
   }
   }

client/main.scss

-.text-center {
+.textcenter {
   text-align: center;
   text-align: center;
   h1 {
   h1 {
     padding: 20px;
     padding: 20px;

webpack.config.js

@@ -12,7 +12,11 @@ const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
 
 
 const extractSass = ExtractTextPlugin.extract({
 const extractSass = ExtractTextPlugin.extract({
   use: [{
   use: [{
-    loader: "css-loader"
+    loader: "css-loader",
+    query: {
+      modules: true,
+      localIdentName: '[name]__[local]___[hash:base64:5]'
+    }
   }, {
   }, {
     loader: "sass-loader"
     loader: "sass-loader"
   }],
   }],