LoginSignup
17

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-02-03

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.cssimportします。

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.jssrc/pages/index.module.scssimportします。

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というオブジェクトとして扱っていています。.txtStylesのプロパティになっているので、className属性で{Styles.txt}とすると、.txtで設定したCSSプロパティが反映されます。

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
17