大学4年生（2020年7月時点）のゆうやと申します。
最近、GatsbyJSで自分のブログサイトを構築して遊んでいます。
この記事では、Sassを使う方法について解説してみます。
結論
node-sassと gatsby-plugin-sassというプラグインを導入します。
Using Sass in Gatsby | GatsbyJS
前提
- 筆者の環境
- Windows 10 Home 64bit
- node v12.18.0
- npm 6.14.4
手順
- パッケージをインストールする
- 設定ファイルにプラグインの記述をする
- 拡張子を付けてスタイルを指定する
- インポートして、指定したスタイルを適用する
パッケージをインストールする
2つのパッケージをインストールします。
$npm install--save node-sass gatsby-plugin-sass
設定ファイルにプラグインの記述をする
gatsby-config.js
module.exports={plugins:[`gatsby-plugin-sass`,],}拡張子を付けてスタイルを指定する
もともと .cssのファイルがあれば、拡張子を .scssに変更します。
まだスタイルシートがなければ、 .scssファイルを作成します。
インポートして、指定したスタイルを適用する
.scssファイルを gatsby-browser.jsにインポートします。
gatsby-browser.js
import"./src/styles/stylesheet.scss"Sassの書き方
こちらの記事が参考になりました。