Gatsby.js で Sass .sass .scss を使う
TweetGatsby で CSS を扱う方法は様々ありますが、伝統的な Sass を使ったコーディングをすることもできます。
https://www.gatsbyjs.org/packages/gatsby-plugin-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 と組み合わせることもできます。
https://www.gatsbyjs.org/packages/gatsby-plugin-sass/#with-css-modules
単にファイル名を App.module.scss
のように .module.scss
とすればいいだけのようです。CSS Module については別記事も参照してください。