2020-11-13

GatsbyでSASS, SCSSを扱う

Gatsby
scss

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

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

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

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

yarn add node-sass gatsby-plugin-sass  

gatsby-config.js の修正

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

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

あとはいつもどおり

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

node-sass のバージョンで怒られるときは

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

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

これで動きます!

参考サイト

Gatsby.js で静的な Web サイトをサクッと作る(CSS・SCSS 篇)- Qiita


猫派 / 基本インドア / ガジェット大好き / RDP推進派
コロナ禍の趣味はPC+VRでゲーム。
最近のゲーム:Factorio / BeatSaber / にゃんこ大戦争

→ Policy