GatsbyJSでSass+CSS modulesを使う

最近、Gatsbyjs+Netlifyを使って自分のwebsiteを作っています。せっかくなので静的サイト制作にチャレンジしようと思って、GatsbyJSを選択しました。 下記のエビスコムさんの書籍で制作中です。開発環境のくだりがPDFと別付録になっているのが良いです。

さて、上記の本を読んでGatsbyJSで構築したサイトをNetlifyでデプロイして、反映させるところまでできました。 ここからさらにサイトのデザインを作っていきたい。でももうただのCSSは書きたくない。ScssかLessを使いたいなってなった時のための備忘録メモです。

プラグインをインストールする

まずSassを使うために、必要なプラグインを入れます。

yarn add node-sass gatsby-plugin-sass

そして次に設定ファイルgatsby-config.jsに入れたプラグインを追加します。

 plugins: [`gatsby-plugin-sass`]

これでgatsby developした時に、SCSSが編集できるようになります。

使い方

srcフォルダにstylesフォルダを作り、そちらにscssファイル一式を作っていきます。

私のやり方ですが、最初にindex.scssを作り、このファイルをscssのハブにします。こちらのファイルは、layout.jsに読み込ませます。このファイルの中には、@importで各モジュールのscssファイルや変数や共通のスタイルを書いたscssファイルを読み込ませます。

# layout.js
import styles from "../styles/index.scss"

ヘッダーやフッターなどのモジュールは要素ごとに*.module.scssというファイル名で作り、@importで読み込ませます。

# header.js
import styles from "../styles/header.module.scss"

そしてクラス名の箇所を、className={styles.header}と[styles.***}とくくっておけばスタイルが反映されます。

あとはheader.module.scssにscssの書き方でスタイルを書いていけばOK👌です。

この機会に初めて、css modulesを使ってみましたが、パーツごとにスタイルを書いていくのでコードがぐちゃぐちゃにならずに済んですっきりしています。 普段はLessを書いているので、Scssの書き方を忘れてしまいましたが、思い出しつつサイトを作っています。