Gatsby.js+Emotion으로 환경 구축

Gatsby.이것은 js에서 Emotion을 가져올 때의 의사록입니다.
이번 코드는 아래 창고에 저장됩니다.무슨 일이 있으면 참고할 수 있다.
https://github.com/tsuki-lab/gatsby-emotion-sample
가져온 내용을 참조하려면 1.Emotionをインストール부터 읽으십시오.
이 기사는 자바스크립트 기반 Gatsby입니다.js를 대상으로 typescript 환경에서도 가져올 수 있습니다.마지막으로 typescript에 대응하는 내용을 보충했습니다.
이 글은 다음 판본의 정보이다.

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;
+   }
+ `

.tsx를 사용하여 css 속성 오류가 발생할 경우 ex.TypeScriptの場合를 참조하십시오.

ex.Type Script의 경우

TypeScript(.tsx)의 경우 css 태그에 오류가 발생할 수 있습니다.
이때 .tsconfig.json에 다음 내용을 추가하십시오.
.tsconfig.json

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

최후

어때, 요즘은 Gatsby를 접할 기회가 많아서 환경을 구축해 왔어.
만약 완비되지 않고 보충되지 않는다면, 나에게 메시지를 남길 수 있다면 정말 좋겠다.
SNS에서 앞머리 주변에 대한 불평을 하는데 정보를 교환할 수 있다면 기쁠 것 같아요.🐰

참고 자료

gatsby-plugin-emotion