BulumaをnpmでインストールしてWebpackで使う

プログラミング

Bulumaとは

bulma.io

Bulumaという便利なCSSフレームワークがあるのですがnpmで利用する方法を書いておきます。

npmでインストールしてWebpackでBulumaを使う方法

以下の公式の焼き回しです。
bulma.io

事前準備

プロジェクトがなければnpm initする.

必要なパッケージを追加する

npm install bulma --save-dev
npm install css-loader --save-dev
npm install extract-text-webpack-plugin@next --save-dev
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
npm install webpack --save-dev
npm install webpack-cli --save-dev

追加できればpackage.jsonが以下のようになると思います。

{
  "name": "mybulma",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "license": "MIT",
  "devDependencies": {
    "bulma": "^0.7.2",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
}

extract-text-webpack-pluginは^4.0.0-beta.0でないとエラーが出るので気をつけてください。

webpackの設定をする

なければwebpack.config.jsを作成する。
適宜読み替えて以下の内容を追加してください。 以下ではsrcフォルダにあるjsをdistに出力する設定になってます。

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          'css-loader',
          'sass-loader'
        ]
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin('css/mystyles.css'),
  ]
};

srcフォルダを作成する

entryで設定している./src/index.jsがなければ作成し以下を追記する。

require('./mystyles.scss');

Sassファイルを作成する

同じsrc直下にmystyles.scssがなければ作成し以下を追記する。

@charset "utf-8";
@import "~bulma/bulma";

distフォルダを作成する

jsフォルダとcssフォルダを作成してください。 webpackでのビルド時に中にファイルが生成されます。

htmlファイルを作成する

distフォルダ直下にmypage.htmlを作成し以下を追記する。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My custom Bulma website</title>
    <link rel="stylesheet" href="css/mystyles.css">
  </head>
  <body>
     <h1 class="title">
        Bulma
      </h1>

      <p class="subtitle">
        Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
      </p>

      <div class="field">
        <div class="control">
          <input class="input" type="text" placeholder="Input">
        </div>
      </div>

      <div class="field">
        <p class="control">
          <span class="select">
            <select>
              <option>Select dropdown</option>
            </select>
          </span>
        </p>
      </div>

      <div class="buttons">
        <a class="button is-primary">Primary</a>
        <a class="button is-link">Link</a>
      </div>
  </body>
</html>

ビルドする

npm run buildでdist内にコンパイルしたファイルが追加されます。

確認する

mypage.html をブラウザで開いてbulumaが適応されていれば完了です。