[アイコン] ディレクトリインストール対応 OW-2522

[akagane99]

概要

• フォントアイコンのリンク切れ #2138

上記の不具合対応です。
下記のプルリクエストで不具合が混入しました。

• [アイコン] fortawesomeをnpmでインストール形式に見直し OW-2522 #2135

npmライブラリ更新コマンド

# cssの相対パスを指定するため、webpack.mix.jsを編集
vi webpack.mix.js

// fortawesomeのディレクトリインストール対応で、相対パスを指定
mix.setResourceRoot('../');

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

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

動作確認

github actionsで自動テスト（ドキュメントルート）

• https://github.com/opensource-workshop/connect-cms/actions/runs/13779304842
• 簡易的にgithub actionsでドキュメントルートでインストールした時の自動テストを行いました。エラーなしでした。
• screenshots でメニュープラグインの画面を確認し、＋アイコンが表示されていることを確認しました。
• 

ディレクトリインストール

XAMPPでディレクトリインストールをしたConnect-CMSで動作確認しました。
メニュープラグインの画面を確認し、＋アイコンが表示されていることを確認しました。

【メニュープラグインの画面】

【固定記事＞編集画面】

レビュー完了希望日

なし

関連Pull requests/Issues

概要に記載

参考

• font awesome 5 - Laravel Mix Fontawesome - Stack Overflow
  https://stackoverflow.com/questions/53827193/laravel-mix-fontawesome

  • webpack.mix.js in your root folder:
    mix.setResourceRoot('../');

• 【CSSの相対URL】なんとなくでつけていたwebpack.mix.jsのオプションが仇となり...
  https://zenn.dev/naoki_oshiumi/articles/72e9d5bb532b70

  • processCssUrlsをtrueにしていると、webpackがcssとかの相対パスをいい感じに勝手に書き換えてくれるんですね。

  • default=true。これがsassのurl() を書き換えてた。

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