Elm0.19でbulmaを利用する
方法はいろいろあります。
2つの方法について、以下に記載させていただきました。こちらの、create-elm-appのpublic/index.htmlにbulmaとFontAwesome5のCDNを記載する方法がお勧めです。
http://i-doctor.sakura.ne.jp/font/?p=36404
Elm0.19でCSSフレームワーク”bulma”を試してみる(1)(surprisetalk/elm-bulma packageの利用)
2019年3月24日
http://i-doctor.sakura.ne.jp/font/?p=36426
Elm0.19でCSSフレームワーク”bulma”を試してみる(2)(create-elm-appでelmアプリを作成)
2019年3月24日
http://i-doctor.sakura.ne.jp/font/?p=36580
create-elm-appでbulmaとfontawesome5を試してみる
2019年3月28日
ほとんど同じですが、もう少し簡単な方法を以下に記載させていただきました。
開発環境
Windows 10 Pro
Chrome
VisualStudioCode 1.32.3
git version 2.20.1.windows.1
nvm 1.1.7
node 10.2.0
npm 6.4.1
elm 0.19.0
elm-format 0.8.1
VisualStudioCodeの拡張機能でelmをインストールして、settings.jsonに以下のようにelmを設定
"[elm]": { "editor.formatOnSave": true },
src/Main.elmをmain.jsにコンパイルしてindex.htmlに読み込む
元のソースコードは、https://superhahnah.com/elm-flags/ を写経させていただきました。
詳細は以下をご覧ください:http://i-doctor.sakura.ne.jp/font/?p=37457
おおまかな流れ
- アプリ作成用フォルダを作成(例:C:/elm/elm-flag/)
- “elm init“でelm.jsonを作成
- index.htmlの作成(ここにbulmaとFontAwesome5を読み込む)
- src/Main.elmの作成
- ”elm make src/Main.elm --output=main.js“でsrc/Main.elmをmain.jsにコンパイル
- index.htmlをChromeで開く。
index.htmlとsrc/Main.elm
リンク