【Gatsby】Sass + CSS Modulesな環境を作る

JavaScript
2021.04.02
スポンサーリンク

今回はGatsbyでSass + CSS Modulesが使える環境構築のやり方解説します。

 

スポンサーリンク

GatsbyでSass + CSS Modulesな環境を作る

パッケージをインストール

GatsbyではデフォルトでCSS Modulesが使える様になっています。なので必要なのはSassのパッケージだけです。

node-sassとgatsby-plugin-sassというパッケージを使います。npmかyarn、好きな方でインストールしましょう。

#npm
npm i node-sass gatsby-plugin-sass

#yarn
yarn add node-sass gatsby-plugin-sass

 

gatsby-config.jsに追加

gatsby-config.jsのplugins: []に`gatsby-plugin-sass`を追加します。

module.exports = {
  siteMetadata: {
    // ...
  },
  plugins: [
    // ↓ここを追加
    `gatsby-plugin-sass`,
    // ...
  ]
}

これだけでGatsbyでSass + CSS Modulesが使える様になります。

 

Sass + CSS Modulesの使い方

使い方は普通のCSS Modulesと同じです。****.module.scssというファイル名にするとCSS Modulesと認識されるので、これを作ってjs側でimportするだけ。拡張子は.scss（.sass）にしましょうね。

 

ディレクトリ構成をどうするか？

.scssファイルをどこに置こうか若干悩みましたが、決まった配置も特にないのでわかりやすければいいと思います。

僕は/src/styles/_home.module.scssという感じで置くことにしました。Gatsby公式チュートリアルや解説記事を書いている人もこの構成が結構多かったですね。

サイト全体で使うグローバルなスタイルは/src/styles/global/_base.scssという感じで置いています（サイト全体で使うスタイルはCSS Modulesじゃないことに注意）

/
└── src/
    └── styles/
        ├── global/
        │   └── _base.scss
        ├── _home.module.scss
        ├── _post.module.scss
        ...

 

Sass + CSS Modulesを使う

****.module.scssに普通にスタイルを書いていきます。もちろんSassの構文が使えます。

// _home.module.scss
.link {
  text-decoration: underline;
  color: #1967d2;
  &:hover {
    text-decoration: none;
    opacity: 0.7;
  }
}

 

そうしたらjs側でimportすればok。/src/styles/_home.module.scssみたいに絶対パスで読み込んでもokです。

import React from "react"
import Layout from "../components/layout"
// ↓ここを追加
import * as styles from '../styles/_home.module.scss'

const Index = ({ data }) => {

  // graphQL関連は省略

  return (
    <Layout>
      <Link to={`hoge`} className={styles.link}>これはリンクです</Link>
      {/* その他省略 */}
    </Layout>
  )
}

export default Index

import * as stylesとしているのでclassName={styles.クラス名}と書けばそのクラスのスタイルが当たります。stylesという名前でimportするのが定番な気がします。

 

CSS Modulesの結果

こんな感じでランダムなクラス名でスタイルが当たっていればokですね。

 

注意点

注意点としては、gatsby-starter-blogなどで作った人は1行目のimport React from "react"の部分がimport * as React from "react"となっていると思います。

しかし、このままではエラーが出てしまいます。

// これはダメ。gatsby-starter-blogなどで始めた場合にありがち
import * as React from "react"
import styles from '../styles/_home.module.scss'

ググってみるとなぜかこの書き方で書いてる人がいっぱいいるんですよね。エラー出ないんだろうか…。

 

エラーが出ない様にするにはCSS Modulesの方を* as stylesでimportすればokです。

// こう書く
import React from "react"
import * as styles from '../styles/_home.module.scss'

 

調べた感じだとGatsby公式も上の書き方をしているので、エラーが出て詰まったらとりあえずこうしておくのがいいと思います。

＞＞Component-Scoped Styles with CSS Modules | Gatsby

 

グローバルなスタイルを読み込む

サイト全体に適用するグローバルなスタイルはgatsby-brower.jsというファイルでimportすればokです。

import './src/styles/global/_reset.scss'
import './src/styles/global/_base.scss'

gatsby-brower.jsはサイト全体に対する設定や、グローバルなファイルを読み込んだりするのに使うファイルです。まあサイト全体に適用したい設定とかはここに書くって感じでしょう。

APIなども用意されているみたいですが正直よくわかりませんでした。ほぼ使わないので無視でいいと思います。

＞＞Gatsby Browser APIs | Gatsby

 

まとめ

GatsbyでSass + CSS Modulesな環境を作るには、Sassのパッケージをインストールするだけで大丈夫ですね。CSS Modulesが使えればかなり楽にCSSが管理できると思うのでこれは使わない手はないですよ。

CSS Modules自体もハードルが低く初見でも全然使いこなせるので、慣れていない人はこの機会に色々試してみるといいと思います！

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！

読んでみる
スポンサーリンク