Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした