あとあとスタイルはラクしたいので、scss を使えるようにします。
プラグインインストール
yarn add node-sass gatsby-plugin-sassgatsby-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;
}
...