質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

1250閲覧

LaravelでFontAwesomeを適用した後のコンパイル時のターミナルについて

seaweb

総合スコア14

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/11/20 09:00

laravel(6.15.1)でエンジニアさんと共同製作しております。
私はフロント側を担っているのですが、
FontAwesomeを適用させたところ、ターミナルに表示されるようになったものがありました。
それが適切なものか疑問に思い、質問させていただきたいです。
ご返答をいただけると幸いです。よろしくお願いいたします。


もともとresources/js/app.jsには以下コードが追加されており、

import '@fortawesome/fontawesome-free/js/all.min';

node_modulesには@fortawesome/fontawesome-freeフォルダが追加されていました。
この状態で私のPCでFontAwesomeは表示されていたのですが、
エンジニアさんのPCでは擬似要素にされていたFontAwesomeが表示されず、すべて□に×マークで表示されていない状態でした。

その後以下記事を参考にして、
https://qiita.com/kuroro_ru/items/f540bdc63b37c4c9e8f1

resources/sass/app.scssに以下コードを追加し

"~@fortawesome/fontawesome-free/scss/fontawesome.scss", "~@fortawesome/fontawesome-free/scss/regular.scss", "~@fortawesome/fontawesome-free/scss/solid.scss", "~@fortawesome/fontawesome-free/scss/brands.scss",

resources/sass/_variables.scssに以下コードを追加しました。

$fa-font-path: "../webfonts";

これでnpm run watchでコンパイルすると
自動的に
public_html/fonts/vendor/@fortawesome/fontawesome-freeディレクトリ内に

webfa-brands-400.eot
webfa-brands-400.svg
webfa-brands-400.ttf
webfa-brands-400.woff
webfa-brands-400.woff2
webfa-regular-400.eot
webfa-regular-400.svg
webfa-regular-400.ttf
webfa-regular-400.woff
webfa-regular-400.woff2
webfa-solid-900.eot
webfa-solid-900.svg
webfa-solid-900.ttf
webfa-solid-900.woff
webfa-solid-900.woff2

が追加されました。

この状態でエンジニアさんのPCでも擬似要素のFontAwesomeが表示されるようになったのですが、
npm run watchをするたびに

DONE Compiled successfully in 11492ms 17:55:15 Asset Size Chunks Chunk Names /css/app.css 1.58 MiB /js/app [emitted] /js/app /js/app.js 6.7 MiB /js/app [emitted] /js/app fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?57dcda6f368ea90179f75cbdae96c263 130 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg?9d67fa1429375bd2a899a17eb77d0342 699 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?9ec698d1a597bff5df337094b71ddaaf 130 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?067595ad77ecc0db9c81c8905a7eef32 74.8 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff?b564da88bbf0c4aa446fa19653713cd1 87.7 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?3351f435b3c9037fd88aeb04dc1e43bc 33.6 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg?5d0861781aeef6c82fda3a3076954a1b 141 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?a0e3ac82940c1998c5977fd4bc1f5ef6 33.3 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?4165c2688309cbfb1b877caf8f75afb5 13.3 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff?73cf49a2232c06c920b7a34e36bfb58c 16.4 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?89e02bae13c9131c7468b1e729339ac1 190 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?0724bb8b89ab6b8b9b7df917b17be0b7 829 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?75f38a159982b6bd1704891332d95fa7 189 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?55eb2a60e8181f0e68b558c991973bf0 74.3 KiB [emitted] fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?cdfec5cf5e9840889790bcf2c4042583 96.7 KiB [emitted]

と表示されるようになったのですが、これは適切な状態でしょうか?

エンジニアさんはこのようなことは今までなかったとのことなので、
この状態が適切なのか疑問に思い、質問させていただきました。

長文になってしまい恐縮ですが、ご返答をいただけると助かります。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

phper.k

2020/11/20 09:01

successfully って書いてあるし、何も問題ない。
seaweb

2020/11/20 09:06

ご返答ありがとうございます。 確かにエラーもないので問題ないのかなと思うのですが、 いつもと違う状態なので不安になり質問させていただきました。 助かりました!
kai0310

2020/11/21 11:41

この話が本当ならそのエンジニアさんの知識不足にもなりますね。。 ーーーーーーーーーー 本質問、解決できたのならば解決済みにしてください。
guest

回答1

0

自己解決

コメントをいただき、コンパイル後successfullyとなっているため、このままで問題ないということで解決しました。

投稿2020/11/22 00:26

seaweb

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問