GatsbyでSCSSをMixinする方法

8417 ワード
Sass scss gatsby mixin Sass テキストリンク

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が中央揃えされています