GatsbyサイトのスタイルシートをSassに移行
2018年12月23日2019年1月16日
なにかとSassの方が便利なので、このサイトのスタイルシートもSassに変更しました。JavaScriptおじさんの記事を参考にさせていただきました。ありがたし。
1. プラグインとnode-sassをインストール
npm i -S node-sass gatsby-plugin-sass
2. gatsby-config.jsに追加
gatsby-config.js
のプラグイン一覧にgatsby-plugin-sass
を追加します。
plugins: [
`gatsby-plugin-sass`,
]
3. スタイルシートの変更
僕はCSS Modulesの書き方でスタイルを書いていたので、使っていたCSSファイルを全てSCSSに書き換えて、インポート元の参照を書き換えました。
// 変更前
import styles from "./blog-post.module.css"
// 変更後
import styles from "./blog-post.module.scss"
以上です!
@media
の記述とか、Sassの方が便利なので良かったー。