GatsbyでBulmaを使う

投稿: 2017-09-11T10:46:14.053Z ごろ

Gatsby で Bulma を使います。他の sass ベースのフレームワークも同じ手順でいけると思います。

gatsby-plugin-postcss-sass を導入する

yarn add gatsby-plugin-sass

gatsby-config.js

module.exports = {
  siteMetadata: {
    author: 'tmnm',
    title: 'tmnm.tech',
  },
  plugins: [
    'gatsby-plugin-catch-links',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              linkImagesToOriginal: false
            }
          }
        ]
      }
    },
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sharp',
    {      resolve: `gatsby-plugin-postcss-sass`,      options: {        precision: 8,      },    },  ],
}

Bulma をインストールする

現時点で v0.5.1 ですね

yarn add bulma

scss ファイルを作成

色々やり方はあると思いますが、 src/css/base.scss というファイルに以下の記述をしました（拡張子が css だと sass として認識されないので注意）

@import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
@import "./variables.scss";
@import "../../node_modules/bulma/bulma.sass";

variables.scss は各種 sass/scss の変数定義です。この書き方は Bulma の公式ドキュメントを参考にしています。

レイアウトファイルで呼び出し

src/layouts/index.js

import "../css/base.scss"

これで反映されます。