CSSフレームワークのBulmaとWebpackとPostCSSでハマったので備忘録

今までなんとなく Bulma: a modern CSS framework based on Flexbox を使っていました。今回のプロジェクトではPureやMilligramも候補にしたのですが、

  • Pure: pure-u-1-3 とかの一瞬思考が止まるクラス名はちょっといや
  • Milligram: Breakpointの定義がなかった

などの理由で結局Bulmaにしました。

BootstrapとかFoundationは使い勝手が良いんですが、添加物(jQuery)が気になるので除外しています。

今回は必要な機能だけを取り込んで使う方式 にしたのですが、ちょいちょいハマったのでメモしておきます。

Bulmaのバージョンは、 0.5.1 です。

開発方針

  • 独自に定義する部分にはcssnext(PostCSS)を使う
  • Webpackを使う
  • bundle.js にまとめる

webpack.config.babel.js

webpack(開始時バージョン3.5.5)の設定は以下のように。スタイル部分は、

  1. style-loader
  2. css-loader
  3. postcss-loader
  4. sass-loader

の順に記述します。以下の記事がわかりやすかったです。

参考 : WebpackってCSS周りのLoaderがいっぱいあって分かりにくいので整理してみる - Qiita

import path from 'path'
import webpack from 'webpack'

module.exports = {
  entry: ['./src/index.js'],
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'static/js'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/,
      },
      {
        test: /\.s?a?css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
}

postcss.config.js

postcssの設定は以下のみ。シンプルです。 autoprefixer 標準装備になったとのことで ますますシンプルになりました。

module.exports = ({ file, options, env }) => ({
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {
      browsers: ['last 2 versions', '> 5% in JP'],
    },
  },
})

親ファイル

構成は

root
 |- src
     |- styles.css
     |- css
         |- layout.css
         |- font.css

という形で、 src/styles.css にBulmaのモジュールや自分で書いたcssの import文を記載していきます。

@import '../node_modules/bulma/sass/utilities/_all.sass';
/* set variables     */
$navbar-height: 48px;

/* set variables end */
@import '../node_modules/bulma/sass/base/minireset.sass';      // リセットしないとグリッドが崩れる
@import '../node_modules/bulma/sass/grid/columns.sass';        // グリッド
@import '../node_modules/bulma/sass/elements/container.sass';  // コンテナの定義
@import '../node_modules/bulma/sass/base/helpers.sass';        // `is-hidden-mobile` などの便利クラス
@import '../node_modules/bulma/sass/components/navbar.sass';   // ハンバーガーメニューなど

@import 'css/layout';
@import 'css/font';

/* set variables */ のところは Bulmaの変数を上書きする部分です。今回はそれほど 書くことがなかったのでここに記載しています。

はまりポイント

1. グリッド(columnsクラス)がはみ出る、崩れる

最初、 '../node_modules/bulma/sass/grid/columns.sass だけを import していたところ レイアウトが崩れて悩んでいて、独自に治すための定義を色々足したりして対処していたのですが、 minireset.sass を import したら解消しました。

2. ビルド後のcssが独自定義よりもBulmaが後に追記される

これがいちばん時間かかりました。。

独自定義したスタイルがどうも適用されないなと頭を抱えていたのですが、ビルド結果を みてみると章題の通りでした。

import文の順番は何度も確認したのですが、、、結果的にはBulmaの問題ではなくて、 postcss-import の問題でした。

import文の拡張子をトルべし。(参考 : これかなぁ...?Play well with Custom Syntax by RyanZim · Pull Request #245 · postcss/postcss-import

つまりこういうこと

@import '../node_modules/bulma/sass/components/navbar.sass';
@import './css/layout.css';  <- 先に読み込まれる
@import '../node_modules/bulma/sass/components/navbar.sass'; <- 先に読み込まれる
@import './css/layout';

なんでやねんっっってなりました。

Bulmaを使っていての所感

複雑すぎず軽すぎずという、ちょうど良いところを突いている良いフレームワークだなと思っています。

フルスクラッチCSSもやろうとしたんですが、ある程度までは書くんですが、やはり細かい点までの 網羅性をみるとコミュニティの大きなOSSのフレームワークには及ばないなというのが感想です。