GatsbyでBulmaを使う

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'

これで反映されます。