Merge branch 'main' of github.com:aarathyKeyvalue/vertical-stepper into dev

Author: GokulSNath

global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+    const content: {[className: string]: string};
+    export = content;
+}

package-lock.json

@@ -88,5 +88,9 @@
       "jsx",
       "node"
     ]
+  },
+  "dependencies": {
+    "sass": "^1.58.1",
+    "sass-loader": "^13.2.0"
   }
 }

package.json

@@ -1,9 +1,9 @@
 import React from 'react';
-import './styles.css';
+import styles from './styles.scss';
 
 const Stepper = () => {
     return (
-    <div className="stepperContainer">
+    <div className={styles.stepperContainer}>
       Demo
     </div>
     );

src/stepper-component/stepperComponent.tsx

@@ -14,6 +14,9 @@
       "lib": ["es2018", "dom"],
       "moduleResolution": "node",
     },
+    "files": [
+      "global.d.ts"
+    ],
     "include": ["src"],
     "exclude": ["src/**/tests"],
 }

tsconfig.json

@@ -55,11 +55,24 @@ module.exports = {
         loader: 'ts-loader'
       },
       {
-        test: /\.(sa|sc|c)ss$/,
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.scss$/,
         use: [
-          MiniCssExtractPlugin.loader,
-          { loader: "css-loader", options: { sourceMap: true } },
-        ],
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                mode: 'local',
+                localIdentName: '[local]-[hash:base64:5]'
+              }
+            }
+          },
+          'sass-loader'
+        ]
       }
     ]
   },
@@ -70,6 +83,6 @@ module.exports = {
     new webpack.BannerPlugin(banner)
   ],
   resolve: {
-    extensions: ['.ts', '.js', '.json']
+    extensions: ['.ts', '.js', '.tsx', '.json', ".css", ".scss"]
   }
 };