Gatsby.jsで静的なWebサイトをサクッと作る（CSS・SCSS篇）

Gatsby.jsで静的なWebサイトをサクッと作る（インストールからHTML編集篇）の続きです。

今回は、CSS（SCSS）でスタイルをあてるまでを解説します。

SCSSを使えるようにする

そのままでは、SCSSファイルが使えないので、プラグインをインストールします。

$ npm install --save node-sass gatsby-plugin-sass

上記コマンドを実行し、完了したらgatsby-config.jsファイルを作成し、SCSSが使えるように以下の記述をします。

gatsby-config.js

module.exports = {
  plugins: [`gatsby-plugin-sass`]
}

これでSCSSが使えるようになります。

グローバルなスタイルを設定

まずは、リセットCSS等の全ページに適用されるスタイルを設定してみましょう。src/styles/global.scssを作成します。

global.scss

html {
  color: red;
}

続いて、gatsby-browser.jsを作成しsrc/styles/gloabl.cssをimportします。

gatsby-browser.js

import "./src/styles/global.scss"

これで、文字が赤くなっているはずです。$ npm run developでローカルサーバーを起動し、確認してみましょう。　

スコープされたスタイルを設定する

Gatsby.js（React）では、CSS Modulesを使用し、CSS（SCSS）をスコープさせることができます。現時点ではindex.jsしか存在しないので無意味ですが、コンポーネントが増えてくると、そのコンポーネントでのみ有効なスタイルをあてることができるので、すごく便利です。

では、src/pages/index.jsでのみ有効なsrc/pages/index.module.scssを作成しましょう。

index.module.scss

.txt {
  color: green;
}

続いて、src/pages/index.jsにsrc/pages/index.module.scssをimportします。

index.js

import React from "react"
import Styles from "./index.module.scss"

export default () => (
  <div>
    <p className={Styles.txt}>Hello</p>
    <p>world!</p>
  </div>
)

index.module.scssに書かれた.txtを、index.jsではStylesというオブジェクトとして扱っていています。.txtはStylesのプロパティになっているので、className属性で{Styles.txt}とすると、.txtで設定したCSSプロパティが反映されます。

属性名がclassではなくclassNameになっているのは、classがJavaScriptの予約語で使用できないためです。また、{}で囲うことによりJavaScripを実行できます。

ブラウザを確認すると、Helloのみ緑色になっているはずです。また、ChromeのDevToolsでElementを見てみると、class属性部分がユニークな文字列になっています。

今回はここまで！次回も、乞うご期待！