From 09a4ec68c644b2ca75b1ef16ae3c5b6f37833390 Mon Sep 17 00:00:00 2001
From: codeBelt <code@codebelt.com>
Date: Mon, 19 Nov 2018 21:17:27 -0600
Subject: [PATCH] add initial css module

---
 src/typings.d.ts                |  3 +++
 src/views/home/Home.module.scss |  3 +++
 src/views/home/Home.tsx         |  4 +++-
 webpack.config.js               | 30 +++++++++++++++++++++++++++++-
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/views/home/Home.module.scss

diff --git a/src/typings.d.ts b/src/typings.d.ts
index b16b01a..74ce24a 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -11,6 +11,9 @@ declare namespace NodeJS {
     }
 }
 
+declare module '*.css';
+declare module '*.scss';
+
 declare module 'form2js';
 declare module 'react-async-bootstrapper';
 declare module 'react-async-component';
diff --git a/src/views/home/Home.module.scss b/src/views/home/Home.module.scss
new file mode 100644
index 0000000..45f19eb
--- /dev/null
+++ b/src/views/home/Home.module.scss
@@ -0,0 +1,3 @@
+.background {
+    background-color: black;
+}
diff --git a/src/views/home/Home.tsx b/src/views/home/Home.tsx
index d36e5d7..572de06 100644
--- a/src/views/home/Home.tsx
+++ b/src/views/home/Home.tsx
@@ -1,3 +1,5 @@
+import styles from './Home.module.scss';
+
 import * as React from 'react';
 import {connect} from 'react-redux';
 import {push} from 'connected-react-router';
@@ -56,7 +58,7 @@ class Home extends React.Component<IStateToProps & IDispatchToProps & IProps, IS
         const showLoader: boolean = !user || isLoadingUser;
 
         return (
-            <div>
+            <div className={styles.background}>
                 <div className="jumbotron">
                     {!showLoader && (
                         <>
diff --git a/webpack.config.js b/webpack.config.js
index fcae812..e96adb0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -60,7 +60,7 @@ const webpackConfig = {
                 exclude: /node_modules/
             },
             {
-                test: /\.s?css$/,
+                test: /^(?!.*?\.module).*\.s?[ac]ss$/,
                 use: [
                     'css-hot-loader',
                     MiniCssExtractPlugin.loader,
@@ -85,6 +85,34 @@ const webpackConfig = {
                     },
                 ],
             },
+            {
+                test: /\.module\.s?[ac]ss$/,
+                use: [
+                    // 'css-hot-loader',
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: true,
+                            localIdentName: '[name]__[local]--[hash:base64:5]',
+                            minimize: isProduction,
+                            sourceMap: !isProduction
+                        },
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            sourceMap: !isProduction
+                        },
+                    },
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            sourceMap: !isProduction
+                        }
+                    },
+                ],
+            },
             {
                 test: /\.(svg)$/,
                 use: [