導入した背景
他の案件などでsassでスタイルを書いているので、お互いに流用しやすいので、このブログでも採用した。 CSS ModulesはGatsbyに標準で入っている。
やったこと
下記コマンドで必要なパッケージをインストールして、gatsby-config.jsに設定を追加。
bash
$ npm install -S gatsby-plugin-sass node-sass
gatsby-config.js
module.exports = {
...
plugins: [
...
"gatsby-plugin-sass",
...
]
}あとは、sassを書いていき、
components/header.module.sass
.header
height: 48px
.logoWrapper
width: 100%
display: flex
justify-content: center
align-items: center
.logo
height: 28px
margin: 0js側でインポートして、classNameに割り当てる。
components/header.js
import React from "react"
import { Link } from "gatsby"
import { Container, Menu } from "semantic-ui-react"
import styles from "./header.module.sass"
import logo from "../images/logo.svg"
const Header = () => (
<div>
<Menu fixed="top" borderless className={styles.header}>
<Container>
<Link to="/" className={styles.logoWrapper}>
<img src={logo} alt="Logo" className={styles.logo} />
</Link>
</Container>
</Menu>
</div>
)グローバルなスコープでスタイルを適用するには
例えば、フォントサイズをサイト全体で統一したい場合など。下記のように書くと、グローバルにスタイルが適用される。
components/global.module.sass
\:global
// global に書く必要があるstyleはここに書く
body
color: #333
font-size: 16pxそして、このファイルをLayoutコンポーネントでインポートしている。
components/layout.js
import "./global.module.sass"おわりに
だいぶ開発する環境は整ってきた。
