Gatsby.js + Scss(Sass) + Storybookの環境設定

セットアップ手順

※ 最終的に全部入っていれば問題ないので実行順は順不同

以下手順

Storybook のインストール

1. 公式の手順に従ってコマンドを実行すればインストール可能

   npx sb init --builder webpack5
   

Scss(Sass)環境のセットアップ

1. Scss(Sass)関連パッケージのインストール

   yarn add -D css-loader sass sass-loader style-loader
   

2. Gatsby.js の Sass プラグインのインストール

   yarn add -D gatsby-plugin-sass
   

3. gatsby-config.ts の編集

   plugins にインストールした"gatsby-plugin-sass" を追加

   plugins: ["gatsby-plugin-sass"];
   

4. Storybook の Scss アドオンのインストール

   yarn add -D @storybook/preset-scss
   

5. .storybook/main.js の編集

   module.exports = {
     addons: ["@storybook/preset-scss"],
   };
   

Storybook に Gatsby.js を対応させる。

1. .storybook/main.js の編集

   公式の方法だと StaticQuery が処理されないので Gatsby.js の Issue を参考に修正

   module.exports = {
     webpackFinal: async (config) => {
       config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
       config.module.rules[0].use[0].options.plugins.push([
         require.resolve("babel-plugin-remove-graphql-queries"),
         {
           stage: config.mode === `development` ? "develop-html" : "build-html",
           staticQueryDir: "page-data/sq/d",
         },
       ]);
       return config;
     },
   };
   

2. .storybook/preview.js の編集

   import { action } from "@storybook/addon-actions";
   
   global.___loader = {
       enqueue: () => {},
       hovering: () => {},
   };
   
   global.__BASE_PATH__ = "/";
   
   (window as any).___navigate = (pathname) => {
       action("NavigateTo:")(pathname);
   };
   

作成したリポジトリ

https://github.com/reifujimura/website-template-storybook-sass

参考

Gatsby.js プロジェクトへの Storybook のインストール

https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/

Gatsby.js プロジェクトの Scss(Sass)サポートの追加

https://www.gatsbyjs.com/docs/how-to/styling/sass/#:~:text=Sass is an extension of CSS%2C adding nested,can write your stylesheets with more advanced features

Storybook の Scss(Sass)サポートの追加

https://github.com/storybookjs/presets/tree/master/packages/preset-scss

Stroybook の Gatsby.js サポート追加

https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/#manual-configuration