Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@otsukayuhi

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.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属性部分がユニークな文字列になっています。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
20
Help us understand the problem. What is going on with this article?