このブログは、gatsby-starter-blogを使っているのですが、スタイルを追記していく場合、どうしようかと…
(設定ファイルである)style.cssにそのまま記述していく方法もありますが、自分で追記していく際はSassを使いたいなと。
GatsbyJSでSassを使う際には、gatsby-plugin-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でした。