added individual components styles

.storybook/preview.js

@@ -1,20 +1,6 @@
 /** @type { import('@storybook/vue3').Preview } */
-import '@/assets/style.scss'
+import '../src/assets/styles/main.scss'
 
-const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;
-
-import '../src/assets/style.scss'
 import { setup } from '@storybook/vue3';
 
 const components = {

build-scss.cjs

@@ -0,0 +1,20 @@
+const { exec } = require('child_process');
+
+const files = {
+  'src/assets/styles/main.scss': 'dist/styles/main.css',
+  'src/assets/styles/tree.scss': 'dist/styles/tree.css'
+};
+
+Object.keys(files).forEach(key => {
+  exec(`sass ${key} ${files[key]}`, (err, stdout, stderr) => {
+    if (err) {
+      console.error(`Error compiling ${key}: ${err.message}`);
+      return;
+    }
+    if (stderr) {
+      console.error(`Sass stderr: ${stderr}`);
+      return;
+    }
+    console.log(`Compiled ${key} to ${files[key]}`);
+  });
+});