フロントセンセイ

Gatsby（GatsbyJS）でSCSSを使う

Webサイト高速化のための 静的サイトジェネレーター活用入門を通じて作成したこのブログをカスタマイズするにあたって、スタイルシートをSCSSに変更しました。
スタイルはSCSSを使った方が圧倒的に書きやすいので、カスタマイズする際には必須です！
SCSSを書いたことがない方は、ぜひこの機会に学習しましょう！

プラグイン（node-sassとgatsby-plugin-sass）をインストール

▼Using Sass in Gatsby
https://www.gatsbyjs.com/docs/sass/

▼gatsby/packages/gatsby-plugin-sass/
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass

公式ドキュメントに倣いつつ、書籍のやり方に則って、yarnでプラグインをインストールします。
2020年11月現在では、node-sassのバージョンは5.0.0ですがエラーが出てしまうため、以下のコマンドではバージョン4.14.1を指定しています。

yarn add node-sass@4.14.1 gatsby-plugin-sass

npmの場合は以下の通り。

npm install node-sass@4.14.1 gatsby-plugin-sass

gatsby-config.jsに追記

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

書籍のgatsby-config.jsでは、すでにpluginsとして配列が準備してあるため、以下のような記述に。

...
    },
    `gatsby-plugin-sass`,
  ],
}

公式ドキュメントに倣うと以下の通り。

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

スタイルシートの拡張子を変更

既存のスタイルシートの拡張子を、cssからscssに変更します。

// 変更前
layout.css

// 変更後
layout.scss
Gatsby（GatsbyJS）でSCSSを使う

この時点では、CSSの記述がしてあるSCSSとなっただけです。

layout.cssのインポートをlayout.scssに変更

src > components > layout.js で指定している、スタイルシートのインポートも、cssからscssに変更します。

// 変更前
import "./layout.css"

// 変更後
import "./layout.scss"
Gatsby（GatsbyJS）でSCSSを使う

カスタム用SCSSを作成してインポート

src > components にscssというフォルダーを作成し、_style.scssを作成します。

Gatsby（GatsbyJS）でSCSSを使う

layout.scssの最終行で、作成した_style.scssをインポートします。

@import "./scss/style";

自分の書きたいスタイルを、_style.scssに書いていくのみになります。
開発サーバーを起動し、_style.scssを編集すると、リアルタイムにスタイルが反映されることを確認できると思います。

関連記事