Gatsby.js - スタイルの適用方法

1. gatsby-browser.js から読み込む

gatsby-configgatsby-node.jsなどがある階層にgatsby-browser.jsというファイルを作成し、CSS を読み込むことができます。reset.css など読み込むのに良さそう。

//gatsby-browser.js
import "./src/styles/global.css"

// require('./src/styles/global.css')

2. layout コンポーネントにスタイルを適用する

layout.jsなど、どのページにも読み込むコンポーネントにスタイルを適用して全体にスタイルを適用する方法。CSS の量も多くなく、あまり複雑な構成ではない場合はこれで適用させるのが良さそう。gatsby-browser.jsよりスタイルの優先順位はこちら高い(同じ指定をした場合layout.cssが適用される)

//layout.js
import "./layout.css"

3. .module.css で class を作成し適用させる

.cssではなく.module.cssというファイルを作成し、その中に class を作成し、その class のスタイルを適用させる方法。例えばutility.module.cssというものを作成し、下記のような class を設定。class 名でハイフンを使用するとエラーになってしまうようです。

/*utility.module.css*/

.color {
  color: yellow;
}
/*アンダーバーはOK*/
.color_test {
  color: red;
}
/*ハイフンはNG*/
.color-test {
  color: green;
}

utility.module.cssを import して下記のように記述するとスタイルが適用される

import styles from "../styles/utility.module.css"

...

<h1 className={styles.color}>xxxx</h1>

使い回したいスタイルなどをまとめておくと良さそう

GitHub - css-modules

4. コンポーネントファイルをファルダ分けしてスタイルを適用する

alt

コンポーネントファイルをファルダに入れて各コンポーネントごとにスタイルを適用させる方法。例えば、header.jsというファイルを読み込んでいたものをheaderというフォルダを読み込む形になります。フォルダなので画像のように css ファイルを入れることもできます。そのときheader.jsindex.jsというファイル名に変更しないといけません(マークダウンファイルの管理方法と同じ)。この方法で管理している方が多いような印象です。管理も楽ですし拡張性も高い気がします。読み込むときのパスは変わるので変更します。

5. Sass を使用したい場合

Sass を使用したい場合はプラグインをインストールしてgatsby-config.jsにプラグインを追加してから.cssの拡張子を.scssに変更するだけで Sass が使用できます。

npm install sass gatsby-plugin-sass

yarn add sass gatsby-plugin-sass
//gatsby-config.js
plugins: [`gatsby-plugin-sass`]

gatsby-plugin-sass | Gatsby