add sass support for storybook

package.json

@@ -51,6 +51,7 @@
     "less-loader": "^11.1.2",
     "mini-css-extract-plugin": "^2.7.6",
     "prettier": "2.8.8",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.1",
     "storybook": "^7.0.18",
     "style-loader": "^3.3.3",

src/stories/Button.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import './button.css';
+import s from './button.module.sass';
+
+console.log(s);
 
 interface ButtonProps {
   /**
@@ -28,11 +30,11 @@ interface ButtonProps {
  * Primary UI component for user interaction
  */
 export function Button({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary ? s.primary : s.secondary;
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={[s.button, s[size], mode].join(' ')}
       style={{ backgroundColor }}
       {...props}
     >

src/stories/button.module.sass

@@ -0,0 +1,30 @@
+.button
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif
+    font-weight: 700
+    border: 0
+    border-radius: 3em
+    cursor: pointer
+    display: inline-block
+    line-height: 1
+
+    &.primary
+        color: white
+        background-color: #1ea7fd
+
+    &.secondary
+        color: #333
+        background-color: transparent
+        box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset
+
+    &.small
+        font-size: 12px
+        padding: 10px 16px
+
+    &.medium
+        font-size: 14px
+        padding: 11px 20px
+
+    &.large
+        font-size: 16px
+        padding: 12px 24px
+

webpack.config.js

@@ -100,31 +100,5 @@ module.exports = (_, args) => {
         },
       }),
     ],
-    webpackFinal: async (config) => {
-      config.module.rules.push({
-        test: /\.scss$/,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              modules: {
-                localIdentName: '[name]__[local]--[hash:base64:5]',
-              },
-            },
-          },
-          'sass-loader',
-        ],
-        include: /\.module\.scss$/,
-      });
-
-      config.module.rules.push({
-        test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
-        exclude: /\.module\.scss$/,
-      });
-
-      return config;
-    },
   };
 };