💻

GatsbyJSで作っているブログでSass with CSS Modulesな環境を整えた

2019-04-15

導入した背景

他の案件などで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: 0

js側でインポートして、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"

おわりに

だいぶ開発する環境は整ってきた。

キクナントカ

キクナントカ

ソフトウェアエンジニアをしています。Flutter、Rails、GatsbyJSを主に触っています。趣味でボードゲームを制作したり、個人開発したりしています。詳しくはこちら