Gatsby.js で Sass .sass .scss を使う

Gatsby で CSS を扱う方法は様々ありますが、伝統的な Sass を使ったコーディングをすることもできます。

まず必要なプラグインを二つインストールします。

bash

npm install --save node-sass gatsby-plugin-sass

# or

yarn add node-sass gatsby-plugin-sass

次に設定ファイルに以下を追加します。すでに他のプラグインが設定されてると思いますので、それらは変更しないように注意してください。

gatsby-config.js

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

あとはいつも通り .scss という拡張子をつけてスタイルを書いていきます。

style.scss

h1 {
  color: rgb(255, 211, 153);
  transition: color 0.5s;

  &:hover {
    color: rgb(64, 169, 243);
  }
}

最後に先ほどのファイルを import して使います。この場合、import したファイルだけではなく全範囲に影響を与えます。

layout.js

import './layout.scss'

また CSS Module と組み合わせることもできます。

単にファイル名を App.module.scss のように .module.scss とすればいいだけのようです。CSS Module については別記事も参照してください。

Uncle JavaScript.com