フェニックス1.6プロジェクトへのブートストラップの追加

多くの人々はTarwind CSSを使っています、そして、マイククラークは大きなポストを書きましたadding Tailwind CSS to a Phoenix 1.6 project . 今日、私は友人がBootstrap 4にブートストラップ4プロジェクトを移植するのを手伝って、それがTarwind CSSであるので、それがフェニックスプロジェクトに5をブートストラップするのが簡単であるかどうか疑問に思いました.
もちろん、プリビルドされたCSSとJavaScriptのリンクを追加するだけで簡単ですが、私はSASSを使用してブートストラップを微調整することができ、また、必要なJavaScriptコンポーネントだけを埋め込むことができました.それは素晴らしいを使用して簡単であることが判明dart_sass パッケージ.
このレシピのステップは、ほとんどがマイクが彼のチュートリアルにかかるステップに従います.

ブートストラップをインストール
まず、ブートストラップとその唯一の同輩依存性Popperをインストールする必要がありますassets フォルダ.

cd assets
npm init -y 
npm i bootstrap @popperjs/core

ブートストラップを含める
ブートストラップを使用するので、ファイルを削除できますassets/css/app.css and assets/css/phoenix.css .

cd assets
rm css/app.css
rm css/phoenix.css

私は導入で、我々はプロジェクトのブートストラップを微調整できるようにSASSを使用したいと述べた.だから、新しいファイルを作成することができますassets/css/app.scss を返します.

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

bootstrapを実際のために微調整するために、bootstrapドキュメンテーションで説明されるように、より細かなSASSファイルを作成するでしょうlean Sass imports .

ESBuildパイプラインからCSSを削除する
私たちはSASSを使ってCSSファイルを構築することになりますので、ESBuildのパイプラインから削除しなければなりません.
ちょうど次の行をassets/js/app.js .

// We import the CSS which is extracted to its own file by esbuild.
// Remove this line if you add a your own CSS build pipeline (e.g postcss).
import "../css/app.css"

JavaScriptのブートストラップを含める
ブートストラップにはJavaScriptコードの特定の量が含まれています.これを我々の新しいフェニックスプロジェクトのESBuildパイプラインに統合するには、次の行をassets/js/app.js .

// Imports for Bootstrap
import 'bootstrap';

Bootstrap JavaScriptをリアルに調整するには、lean JavaScript ドキュメントのセクション.

SASSコンパイラの追加と設定
JavaScriptとCSSのために、フェニックスは新しいデフォルトのバンドルとしてesbuildを使用しています.SASSをサポートするために、SASSコンパイラをプロジェクトに追加する必要があります.The dart_sass パッケージは公式に基づいているesbuild パッケージは、WojtekマッハとジョーズのVALIMによって作成され、ビルドツールとして公式SASSコンパイラを統合します.

インポートを追加mix.exs

def deps do
  [
    # ...
    {:esbuild, "~> 0.2", runtime: Mix.env() == :dev},
    {:dart_sass, "~> 0.2", runtime: Mix.env() == :dev},
    # ...
  ]
end

中でDetthorn Sassを構成してくださいconfig/config.exs次に、私たちが使用するSASSコンパイラのバージョンであるDartShren Sassに、どの入力ファイルをどの出力場所にコンパイルするかを教えなければなりません.

config :dart_sass,
  version: "1.43.1",
  default: [
    args: ~w(css/app.scss ../priv/static/assets/app.css),
    cd: Path.expand("../assets", __DIR__)
  ]

で開発用ウォッチャーを追加config/dev.exs次のスニペットをwatchers セクションconfig/dev.exs すぐ下にesbuild ウォッチャー.

sass: {
    DartSass,
    :install_and_run,
    [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]
}

CSSの生産
最後に、私たちはassets.deploy ミックスタスクmix.exs SASSコンパイラも使用します.

"assets.deploy": [
  "esbuild default --minify",
  "sass default --no-source-map --style=compressed",
  "phx.digest"
]

プロジェクト
私はあなたの参照のためのGithubで利用可能なデモプロジェクトを作成しました.これは、より汎用性の高いバージョンのapp.js and app.scss ファイル.

oliverandrich / bootstrap_phoenix_project
フェニックス1.6とブートストラップを統合する方法を示す小さなデモプロジェクト.
そして、私はあなたのために便利かもしれないもう一つのパッケージを促進するのが好きです.

oliverandrich / bootstrap_icons_elixir
あなたのエリクサー/フェニックスプロジェクトのSVG文字列としてHeroIconを含める!
写真でMayur Gala on Unsplash