By YOSHIDA NEKOHA in Gatsby — 2020年11月13日

GatsbyでSASS, SCSSを扱う

CSS を書くのに、今どき生 CSS は書かないですよね。

Gatsby でも SCSS を扱うためには、プラグインをインストールします。

依存モジュールのインストール

gatsby-plugin-sassを追加します。node-sassも一緒に。

yarn add node-sass gatsby-plugin-sass

gatsby-config.js にプラグインの参照を追加します。
plugins 配列に追加しましょう。

module.exports = {  
  plugins: [  
    // ～～中略：他のプラグイン～～  
    `gatsby-plugin-sass`,  
  ],  
}

あとはいつもどおり gatsby develop で動作確認できます！

2020/11/13 時点で、yarn add node-sass すると5.0.0 がインストールされます。
プラグインの依存が 4 系なので、別途バージョンを下げる必要がありました。

# 4系最新をインストール(node-sass@4.14.1)  
yarn add node-sass@^4

これで動きます！