BLOG

Phoenix Framework に Bootstrap を導入する

Created at:
Category: Phoenix

以前書きました、Phoenix Framework 上で Sass の環境を構築する方法という記事の続きで、 Phoenix Framework に Bootstrap を導入する方法をご紹介したいと思います。

開発環境

  • Ubuntu: 19.04
  • Phoenix: 1.4.9

Bootstrap とは

Bootstrap は、WEBページを効率よく作成するためのWEBフレームワークです。Bootstrap を使用すると HTML/CSS などの知識をあまり持っていなくとも、ある程度のWEBデザインを構成することが可能になります。WEBページの開発を簡単にするために、Bootstrap を利用することは大変有用ではないかと思います。

Bootstrap の導入

jquery と popper.js 、 Bootstrap のインストール

Phoenix 上にて Bootstrap の環境を構築するために、 jquery と popper.js 、そして Bootstrap をインストールします。 /assets/ ディレクトリ上で、以下のコマンドを実行してください。

※今回は2019年10月時点での最新バージョンである、 Bootstrap の 4.3.1 をインストールしております。

npm install --save-dev jquery popper.js bootstrap@4.3.1

scss ファイルと js ファイルの編集

/assets/css/ ディレクトリ上の app.scss ファイルに以下を追加します。

@import "../node_modules/bootstrap/scss/bootstrap.scss";

/assets/js/ ディレクトリ上の app.js ファイルに以下を追加します。

@import "bootstrap"

これで、 bootstrap.scss ファイルが読み込まれるようになりました。

最後に

以上の設定で、 Phoenix 上で Bootstrap を使用することができるようになります。 Bootstrap をどのように使えば良いのかということについては、以下の書籍が大変参考になります。

参考

Kindle 版の Elixir/Phoenix 初級②: データベースとクエリ構造体 は、 Amazon Kindle Unlimited の対象です。