Gatsbyでscssを使う

あとあとスタイルはラクしたいので、scss を使えるようにします。

プラグインインストール

yarn add node-sass gatsby-plugin-sass

gatsby-config.js に追記

gatsby-config.js
plugins: [
  ...
  `gatsby-plugin-sass`,
  ...
  ],

これで scss が書けるようになります。

scss を適用

私は色設定が散るのが嫌いなので、こんな感じにまとめています。

src\styles\global.scss
$default-color: #202428;
$bg-color: #f2f3f3;
$link-color: #f76b8a;

html {
  background-color: $bg-color;
  color: $default-color;
}

a {
  color: $link-color;
  transition: all 0.5s ease;
  text-decoration: none;

  &:hover {
    opacity: 0.8;
    transition: 0.5s;
  }
}

import して使いたい。

src\components\layout.scss
@import '../styles/global.scss';

header {
  padding-bottom: 1em;
}
...

参考

https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/