yuya-yuzen

GatsbyJSで構築したブログサイトでSassを使う

2020/08/08
2020/08/08

GatsbyJSで構築したブログサイトで、Sassを使う方法について解説します。

結論

node-sassgatsby-plugin-sass というプラグインを導入します。

Using Sass in Gatsby | GatsbyJS

前提

  • 筆者の環境

    • Windows 10 Home 64bit
    • node v12.18.0
    • npm 6.14.4

手順

  1. パッケージをインストールする
  2. 設定ファイルにプラグインの記述をする
  3. 拡張子を付けてスタイルを指定する
  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の書き方

こちらの記事が参考になりました。

SCSSの基本的な書き方


Share:
ゆうや