Zenn
💄

Gatsby.js + Emotion で環境構築

2021/09/06に公開
Gatsby.js
JavaScript
TypeScript
環境構築
emotion
tech

Gatsby.jsにEmotionを導入した際の忘備録です。

今回のコードは、下記リポジトリに保存してあります。何かあった時には参考になればと思います。
https://github.com/tsuki-lab/gatsby-emotion-sample

この記事は以下のバージョン時点の情報です。

  • gatsby: 3.13.0
  • @emotion/react: 11.4.1
  • gatsby-plugin-emotion: 6.13.0

0.プロジェクトの作成

npx gatsby {project-name}

1.Emotionをインストール

プロジェクトにgatsby-plugin-emotionと@emotion/reactを追加します。

yarn add gatsby-plugin-emotion @emotion/react

2.gatsby-config.jsを編集

gatsby-plugin-emotionをgatsby-config.jsに追加します。

gatsby-config.js
module.exports = {
  // ...
  plugins: [
    // ...
    `gatsby-plugin-emotion`,
  ]
}

以上でプロジェクトでEmotionを利用できるようになったと思います。

3.スタイリング

私はコンポーネントとスタイルの責務をファイルで分けたい人の為、src/components/*.jsとは別にsrc/styles/components/*.styles.jsでスタイルを管理しています。

下記に一例としてsrc/components/layout.jsのソースコードを記載します。

🔗 src/components/layout.js

src/components/layout.js
  /**
   * Layout component that queries for data
   * with Gatsby's useStaticQuery component
   *
   * See: https://www.gatsbyjs.com/docs/use-static-query/
   */

  import * as React from "react"
  import PropTypes from "prop-types"
  import { useStaticQuery, graphql } from "gatsby"
+ import * as styles from "../styles/components/layout.styles"

  import Header from "./header"

  const Layout = ({ children }) => {
    const data = useStaticQuery(graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `)

    return (
      <>
        <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
-       <div
-         style={{
-           margin: `0 auto`,
-           maxWidth: 960,
-           padding: `0 1.0875rem 1.45rem`,
-         }}
-       >
+       <div css={styles.layout}>
          <main>{children}</main>
-         <footer
-           style={{
-             marginTop: `2rem`,
-           }}
-         >
+         <footer className="footer">
            © {new Date().getFullYear()}, Built with
            {` `}
            <a href="https://www.gatsbyjs.com">Gatsby</a>
          </footer>
        </div>
      </>
    )
  }

  Layout.propTypes = {
    children: PropTypes.node.isRequired,
  }

  export default Layout

🔗 src/styles/components/layout.styles.js

src/styles/components/layout.styles.js
+ import { css } from "@emotion/react";

+ export const layout = css`
+   margin: 0 auto;
+   max-width: 960px;
+   padding: 0 1.0875rem 1.45rem;
+   .footer {
+     margin-top: 2rem;
+   }
+ `

ex.TypeScriptの場合

TypeScript（.tsx）の場合cssタグでエラーが出ている場合があります。
その時は、.tsconfig.jsonに下記を追加してください。

.tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "jsxImportSource": "@emotion/react"
  }
}

最後に

いかがでしたでしょうか、最近はGatsbyに触れる機会が多くて環境構築してばかりです。
不備や補足等あれば、コメントしてもらえると大変助かります！

SNSでフロントエンドまわりのことをぼやいたりしているので、情報交換などしてもらえるととても嬉しいです🐰
Twitter

参考

Discussion