Gatsby.js를 사용하여 SCSS를 Mixin 할 때 설정 한 메모

하고 싶었던 일

Scoped Style에 mixin으로 정의한 CSS를 include로 읽고 싶었습니다.

mixin의 파일 예

src/assets/scss/foundation/_mixin.scss

// flexbox
@mixin flexbox($wrap: nowrap, $align: stretch, $justify: center) {
  display: flex;
  flex-wrap: $wrap;
  align-items: $align;
  justify-content: $justify;
}

SASS/SCSS 설정

$ yarn add node-sass gatsby-plugin-sass

gatsby-config.js

module.exports = {
     --- （中略） ---
plugins: [
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        data: `@import "./src/assets/scss/foundation/_mixin.scss";`
      },
    }
     --- （中略） ---

Scoped Style에서 Mixin을 사용할 때

다음은 gatsby-starter-default를 사용하여 프로젝트를 만든 것에 대해 index.js에서 Scoped Style을 사용하려는 경우의 예입니다.

src/pages/index.module.scss

.hoge {
  @include flexbox(nowrap, normal, center);
}

src/pages/index.js

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

import Style from "./index.module.scss" // 追加

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    <div className={Style.hoge}> // 追加
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
    </div>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>
)

export default IndexPage

스타일을 맞춘 Div가 가운데 정렬되어 있습니다.