GatsbyJS + tailwindcss + Sass 環境にStorybookを導入する #Sass

はじめに

Gatsby.jsにStorybookを導入しようと思ったんですが、tailwindcssとSassも欲しかったので、構築ついでにメモを残しておきます。

使用する主なフレームワークやパッケージ

GatsbyJS プロジェクトを立ち上げる

まずはチュートリアルに沿って、GatsbyJSを導入します。
https://www.gatsbyjs.org/docs/quick-start/

一通り作業して起動を確認できればGatsbyJSプロジェクトの立ち上げはOKです。

Sassを導入する

GatsbyJS にSassを導入します。これもマニュアルがあるので、それに沿って導入します。
https://www.gatsbyjs.org/docs/sass/

試しにひとつコンポーネントを作成してSassが正常に動作してるかチェックしてみます。

src/components/hogehoge/index.js

import React from "react"
import hogehogeStyle from "./style.module.sass"

const Hogehoge = () => (
  <h1 className={hogehogeStyle.title}>
    ほげほげ
  </h1>
)

export default Hogehoge

src/components/hogehoge/style.module.sass

.title
  color: crimson

src/pages/index.js

// 追加する
import Hogehoge from "../components/hogehoge/index"

// 任意の位置に追加する
<Hogehoge />

これで正常にSassが動作していることが確認できるはずです。

tailwindcss を導入する

次に tailwindcss を導入していきますが、これもまたマニュアルがあるため、それに沿って導入します。
なお今回はマニュアルの Option #3: SCSS を進めます。
https://www.gatsbyjs.org/docs/tailwind-css/

試しにsassファイルを編集してみます。

src/components/hogehoge/style.module.sass

.title
  @apply text-blue-700

色が変わってればプロジェクトの立ち上げは完了です。

Storybook を導入する

大変ありがたいことにStorybookの導入方法すら、公式サイトにマニュアルがありますので、これに従い導入します。
https://www.gatsbyjs.org/docs/visual-testing-with-storybook/

導入ができたら一旦storybookを起動してみます。

shell

yarn run storybook

正常に起動したことを確認したら早速、先ほど作成したテストコンポーネント(hogehoge)をstoryに書いてみます。

src/stories/hogehoge.stories.js

import React from "react"
import { storiesOf } from "@storybook/react"

import Hogehoge from "../components/hogehoge/index"

storiesOf(`Hogehoge`, module).add(`default`, () => (
  <Hogehoge />
))

すると下記の様なエラーが発生するはずです。

shell

ERROR in ./src/components/hogehoge/style.module.sass 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

loaderがないぞと怒っているので、.storybook/webpack.config.jsに追加します。

Storybook をSassとtailwindcssに対応させる

まずは必要なloaderをインストールします。

shell

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

.storybook/webpack.config.jsに下記を追加します。

.storybook/webpack.config.js

config.module.rules.push({
  test: /\.sass$/,
  use: [
    {
      loader: "style-loader"
    },
    {
      loader: "css-loader",
      options: {
        modules: {
          localIdentName: "[path]-[local]-[hash:base64:5]"
        }
      }
    },
    {
      loader: "postcss-loader",
      options: {
        config: {
          path: "./.storybook/postcss.config"
        }
      }
    },
    {
      loader: "sass-loader"
    }
  ]
})

.storybook/postcss.config.jsを追加します。

.storybook/postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")
  ]
}

tailwindcss.config.jsをコピーします。シンボリックリンクでも良いかもしれません。

shell

cp tailwindcss.config.js .storybook

あとはstorybookを実行すれば、無事作業完了です！

まとめ

たったこれだけのことですが、意外とまとめてるところがなかったので書いてみました。
Storybookはデザイナーとエンジニアの意思の疎通のための道具として語られることが多いですが、未来の自分のために残すのにも非常に有益ですので、是非活用しましょう。

この記事についてもし不備などがありましたらご指摘いただけますと幸いです。