Node.js
bootstrap
brunch
MaterialDesign
bootstrap4

brunchでBootstrap Material Design4を使う

めでたい事についにBootstrap4が正式リリースされた。

Bootstrap 4

Bootstrap3はscriptタグで読み込んで使うのがメインだったと思うが、Bootstrap4は大体npmでビルドして使うのがメインだと思う。

Webpackで導入するサンプルは多分検索すればいくらでも出てくると思うが、brunchだとあまり見つからないかもしれないのでメモしておく。

ちなみに、よく使っているのが

Bootstrap Material Design

なので、それについての詳細を書く。ベースはBootstrapなので多分ほとんどBootstrapと導入方法は同じだと思う。

CSS読み込み

brunch-config.jsでcssを読み込む。

  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery'
    },
    styles: {
      "bootstrap-material-design": [
        "dist/css/bootstrap-material-design.min.css"
      ]
    },
  }

npmでインストールはできるけどnpmには対応していない、というライブラリとかも同じ方法で読み込める。

JS読み込み

JSの最初のほうで読み込む。

import "jquery"
import "bootstrap-material-design"

どっかで

    $('body').bootstrapMaterialDesign();