GatsbyサイトのスタイルシートをSassに移行

なにかとSassの方が便利なので、このサイトのスタイルシートもSassに変更しました。JavaScriptおじさんの記事を参考にさせていただきました。ありがたし。

1. プラグインとnode-sassをインストール

npm i -S node-sass gatsby-plugin-sass

• gatsby-plugin-sass - GitHub

2. gatsby-config.jsに追加

gatsby-config.jsのプラグイン一覧にgatsby-plugin-sassを追加します。

plugins: [
  `gatsby-plugin-sass`,
]

3. スタイルシートの変更

僕はCSS Modulesの書き方でスタイルを書いていたので、使っていたCSSファイルを全てSCSSに書き換えて、インポート元の参照を書き換えました。

// 変更前
import styles from "./blog-post.module.css"

// 変更後
import styles from "./blog-post.module.scss"

以上です！

@mediaの記述とか、Sassの方が便利なので良かったー。