Gatsby Starter BlogでSassを利用する
2020-12-15 02:22
Gatsby Starter Blogで作ったブログのデザインをカスタマイズするために、Sassを利用する環境を整えた。
Sassとは
CSSは死ぬほど書いてきたけど、このブログのデザインを作るにあたってSassを使うことにした。 死ぬほど書いてきたCSSに優先度とか何やらで死ぬほどストレスを受けてきたにもかかわらず Sassは使ったことがないので、今更ながら言葉から勉強した。
参考サイト: SassとSASSとSCSSの違いについて | UX MILK
SASSとSCSSでは後者の方が主流らしい。 あとは好みとかプロジェクトの方針とかなのだろうけど、 俺はSCSSの方が好みなのでこちらを使用することにした。 決して長いものに巻かれたわけではない。
Dart Sass
多少話が逸れるけど、現在はDart Sassという実装があるらしい。 2020年現在ではまだあまり普及してないっぽいが、一部の構文が多少変わってる程度のようだし、 何よりSassの公式でそっちを推奨してるので、ナウでヤングな俺はこちらを使うことにした。
よって、以降はDart Sassを使う前提で設定を行う。
必要なパッケージの導入
以下のコマンドで必要なパッケージを導入する。
npm install node-sass gatsby-plugin-sass
Dart Sassを利用するために以下も導入する。
npm install --save-dev sass
ちなみにnode-sass
(LibSass)はgatsby-plugin-sass
に必要なので
Dart Sassを使用する場合でも導入する。
gatsby-config.jsの設定
gatsby-config.jsに、以下のように記述する。
plugins
にgatsby-plugin-sass
を追加gatsby-plugin-sass
のoptions
にDart Sassを使用する設定を追加
module.exports = {
// 略
plugins: [
// 略
{ resolve: `gatsby-plugin-sass`, options: { implementation: require("sass"), }, }, ],
使用
実際に使ってみる。
グローバルスタイルの適用
試しに、以下のようなスタイルを用意する。
@use "base/variables";
body {
background: variables.$main_color;
h1 {
background: variables.$header_color;
}
}
$main_color: yellow;
$header_color: red;
これをgatsby-browser.jsとかで読み込む。
import "./src/styles/theme.scss"
こうすることで、サイト全体のデザインを’00年代初期のウェブサイトを彷彿させる毒々しい色合いにすることができた。
CSS Module
Gatsbyでは標準でCSS Moduleを利用してCSSの適用範囲をスコープさせることができるので、 Sassでの利用方法も確認しておく。
CSS Moduleを利用するためにはまず、拡張子を.module.scssにしてSCSSファイルを作成する。
$index_color: green;
.index {
background: $index_color;
}
これを以下のように特定のページから読み込んで利用する。
// 略
import Style from "../styles/index.module.scss"
const BlogIndex = ({ data, location }) => {
// 略
return (
<header>
<h2 className={Style.index}> // 略
これで特定のページだけにスタイルを適用したりすることができる。