Merge pull request #17 from ymrl/load_scss

👍 StorybookにSassを参照させる
freee · Jan 19, 2024 · 94af08a · 94af08a
2 parents d5853c4 + 832f391
commit 94af08a
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 276 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -10,6 +10,26 @@ const config: StorybookConfig = {
     '@storybook/addon-storysource',
     'storybook-addon-pseudo-states',
     '@kemuridama/storybook-addon-github',
+    '@storybook/addon-styling-webpack',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          // Replaces any existing Sass rules with given rules
+          {
+            test: /\.s[ac]ss$/i,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'sass-loader',
+                options: { implementation: require.resolve('sass') },
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
   stories: [
     '../docs/**/*.stories.mdx',
@@ -30,32 +50,6 @@ const config: StorybookConfig = {
           use: [require.resolve('@storybook/source-loader')],
           enforce: 'pre',
         },
-        {
-          test: /\.scss$/,
-          use: [
-            {
-              loader: 'style-loader',
-            },
-            {
-              loader: 'css-loader',
-            },
-            {
-              loader: 'sass-loader',
-              options: {
-                implementation: require('sass'),
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
-          use: {
-            loader: 'file-loader',
-            options: {
-              name: './fonts/[name].[ext]',
-            },
-          },
-        },
       ],
     },
   }),

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { DocsContainer } from '@storybook/addon-docs';
 import { Decorator, Parameters } from '@storybook/react';
 import { VibesProvider, useLang } from '../src/utilities/VibesProvider';
-import '../vibes_2021.min.css';
+import '../stylesheets/vibes_2021.scss';
 
 const LanguagePortal = React.forwardRef<HTMLDivElement, { lang: string }>(
   ({ lang }, ref) =>