[日付入力] Tempusdominus-bootstrap-4のcssを5.1.2 → 5.39.2 にアップデート

[akagane99]

概要

• Tempusdominus-bootstrap-4のcssは、public/css/tempusdominus-bootstrap-4/tempusdominus-bootstrap-4.min.css に配置されたファイルを直接読み込んでいました。
• Tempusdominus-bootstrap-4は既に package.json で設定済みでしたので、package.jsonで取得したcssを使うように修正しました。
  • package.jsonのTempusdominus-bootstrap-4のsassを基にcssを生成するのですが、sass内で指定されている「Import bootstrap variables」のパスに間違いがあり、既にEOLを迎えているパッケージのため、sassをコピーして修正を行いました。
• 参考
  • 旧：public/css/tempusdominus-bootstrap-4/tempusdominus-bootstrap-4.min.css は v5.1.2
  • 新：package.json の Tempusdominus-bootstrap-4 は v5.39.2

修正後画面

日時入力

npmライブラリ アップグレードコマンド

# ライブラリの最新化
npm update

# app.js, app.cssの最新化
npm run prod

コマンド実行結果

root@37ea93425cea:/var/www/html/connect-cms# npm run prod

> prod
> npm run production


> production
> mix --production


● Mix █████████████████████████ done (99%) plugins 
 BuildCallbackPlugin



● Mix █████████████████████████ done (99%) plugins 
 WebpackBar:done



✔ Mix
  Compiled successfully in 8.65s



                         
   Laravel Mix v6.0.49   
                         

✔ Compiled Successfully in 8467ms
┌─────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                                          File │ Size     │
├─────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                                    /js/app.js │ 1.46 MiB │
│                                                                                        /js/app.js.LICENSE.txt │ 2.96 KiB │
│                                                                                                   css/app.css │ 228 KiB  │
│              fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?1815e00441357e01619e5793e1caa78a │ 206 KiB  │
│            fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?c210719e60948b211a1260f79812efe5 │ 116 KiB  │
│             fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?914997e1bdfc990d0897cdaba877a0b3 │ 66.5 KiB │
│           fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?89999bdf5d835c0120257222e5568fec │ 24.9 KiB │
│               fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?2582b0e4bcf85eceead0de3fd9035c90 │ 416 KiB  │
│             fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?2463b90d9a316e4e5294e6706b6a7a72 │ 155 KiB  │
└─────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully

github actionsでテスト

• https://github.com/opensource-workshop/connect-cms/actions/runs/13989343478
  → エラーなし

レビュー完了希望日

なし

関連Pull requests/Issues

なし

参考

• https://github.com/opensource-workshop/connect-cms/wiki/Datetimepicker
• app.jsとbootstrap.js – ララジャパン
  https://www.larajapan.com/2019/10/14/app-js%E3%81%A8bootstrap-js/

DB変更の有無

無し

チェックリスト

• (DB変更有りの場合) 移行プログラムに影響がない事を確認しました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-check-list---Migration
• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule