逆引きマニュアル: Bulma: カスタマイズ方法(node-sass使用)

やりたいこと

Bulmaのカスタマイズ方法です。

前提条件

以下で確認しています。

• npm 6.4.1
• node-sass 4.9.3
• Bulma 0.7.1

概要

以下の方法を使います。

• With node-sass | Bulma: a modern CSS framework based on Flexbox

手順

詳細は公式サイトを確認してください。

npm init
npm install node-sass --save-dev
npm install bulma --save-dev

次に最低限の .scss ファイルを作成します。 Hugoの場合はパスは assets/sass/main.scss　あたりがいいかと。

@charset "utf-8";
@import "../../node_modules/bulma/bulma.sass";

ビルドは以下のように。

# 開発用に監視
npm start

# ビルド
npm run css-build

補足

マニュアル

• Bulma