• トップページ
• Blog
• GatsbyでSassを使う

GatsbyでSassを使う

GatsbyでSassを使う方法を調べてみました。

インストール

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

またはyarnで

yarn add node-sass gatsby-plugin-sass

gatsby-config.jsの設定

pluginsの項目にgatsby-plugin-sassを追加

plugins: [`gatsby-plugin-sass`]

sassの読み込み

import 'layouts/style.sass'

styled componentの導入

styled componentを使うとSassをコンポーネント化できます。プラグインはgatsby-plugin-styled-componentsをインストールします。

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

またはyarnで

yarn add gatsby-plugin-styled-components styled-components babel-plugin-styled-components

以上のコマンドでインストールできます。

styled componentの使い方

以下のようにSassファイルを.module.sassという拡張子に変更してレイアウトやコンポーネントの中でimportします。

import style from './layouts/style.module.sass'

試しにstyle.module.sassに.front-headlineというクラスを作ってfont-sizeを指定してみます。

.front-headline
  font-size: 2rem

レイアウトページやコンポーネント内で以下のようにローワーキャメルケースにすることでSass内指定したハイフンを使ったクラス名を指定できます。

<h1 className={style.frontHeadline}>Headline</h1>

atnr.net の RSS登録はこちらから

コメントは受け付けていません。