gatsby-plugin-sassを使ってみる

2021年03月09日

このブログは、gatsby-starter-blogを使っているのですが、スタイルを追記していく場合、どうしようかと…

（設定ファイルである）style.cssにそのまま記述していく方法もありますが、自分で追記していく際はSassを使いたいなと。

GatsbyJSでSassを使う際には、gatsby-plugin-sassが便利そうだったので、導入してみました。

こちらに書かれているのはnpmを使ってのインストール方法でした。

yarnでインストールする場合は、（yarnの）サイト内に掲載されていました。

まずは、yarnを使ってインストール

yarn add gatsby-plugin-sass

gatsby-config.jsに追記します。

plugins: [
    {
    resolve: `gatsby-plugin-sass`,
    },

gatsby-browser.jsに、.scssファイルを読み込む設定をします。

import "./src/index.scss"

これで設定は完了です。

nav ul{
  list-style: none;

  li {
  	text-align: center;

  	a {
  		text-decoration: none;
  	}
  }
}

あとは.scssファイルにscss記法で書いてあげれば、OKでした。