chore: 🤖 let Storybook read SCSS

storybookjs/storybook#6364 (comment)

.storybook/main.js

@@ -1,4 +1,21 @@
+const path = require('path');
+
 module.exports = {
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    // Return the altered config
+    return config;
+  },
   "stories": [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"

.storybook/preview.js

@@ -1,3 +1,5 @@
+import "../src/gp/styles/index.scss";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

package.json

@@ -42,6 +42,7 @@
     "git-cz": "^4.7.6",
     "jest": "^27.0.6",
     "prettier": "^2.3.2",
+    "sass-loader": "^10.2.0",
     "ts-jest": "^27.0.3",
     "typescript": "4.3.5"
   }

src/ui/form/NiceButton.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { NiceButton } from "./NiceButton";
+
+export default {
+  title: "Nice/NiceButton",
+  component: NiceButton,
+} as ComponentMeta<typeof NiceButton>;
+
+const Template: ComponentStory<typeof NiceButton> = (args) => (
+  <NiceButton {...args} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: "Button",
+};