Sass-loader Integration

Author: aarathyKeyvalue

.storybook/main.js

@@ -1,3 +1,4 @@
+const path = require('path');
 module.exports = {
   "stories": [
     "../src/**/*.stories.mdx",
@@ -11,5 +12,15 @@ module.exports = {
   "framework": "@storybook/react",
   "core": {
     "builder": "@storybook/builder-webpack5"
+  },
+  "webpackFinal": async (config) => {
+   config.module.rules.push({
+      rules: [{ 
+        test: /\.scss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+        include: path.resolve(__dirname, '../')
+      }]
+    });
+    return config;
   }
 }

.storybook/preview.js

@@ -1,3 +1,4 @@
+// import './main.css';
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

package.json

@@ -66,6 +66,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.58.3",
+    "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.5",
     "ts-loader": "^9.4.2",
@@ -101,6 +103,5 @@
       "jsx",
       "node"
     ]
-  },
-  "dependencies": {}
+  }
 }

src/stepper-component/styles.module.scss

@@ -0,0 +1,24 @@
+.stepperContainer {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    margin-left: 10px;
+}
+
+.eachBubble {
+    border-radius: 50%;
+    height: 24px;
+    width: 24px;
+    background-color: blue;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.eachStep {
+    display: flex;
+    flex-direction: column;
+    align-items: 'center'
+}

webpack.config.js

@@ -57,6 +57,10 @@ module.exports = {
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
+      },
+      { 
+        test: /\.scss$/,
+        use: ['sass-loader']
       }
     ]
   },