Q&A前提・実現したいこと
■開発環境
laravel6.2
php7.4
xampp
heroku
■問題・質問
herokuを利用してlaravelのアプリケーションを公開しようとした際に、共通CSSに追記した設定が反映されません。
具体的にはリセットCSSの追記とjumbotronクラスの変更が、herokuにマージしてもソースコードに反映されていない状態です。
└ソースを確認した際に反映されていないことを確認しました。
また、コンソール上ではエラー等も見受けられませんでした。
この現象の原因及び解決方法をご教示いただきたいです。
ちなみに開発環境では反映・表示されている状態です。
該当のソースコード
app.css
css
1@import url(https://fonts.googleapis.com/css?family=Nunito); 2 3/*リセットCSS*/ 4html, body, div, span, applet, object, iframe, 5h1, h2, h3, h4, h5, h6, p, blockquote, pre, 6a, abbr, acronym, address, big, cite, code, 7del, dfn, em, img, ins, kbd, q, s, samp, 8small, strike, strong, sub, sup, tt, var, 9b, u, i, center, 10dl, dt, dd, ol, ul, li, 11fieldset, form, label, legend, 12table, caption, tbody, tfoot, thead, tr, th, td, 13article, aside, canvas, details, embed, 14figure, figcaption, footer, header, hgroup, 15menu, nav, output, ruby, section, summary, 16time, mark, audio, video { 17 margin: 0; 18 padding: 0; 19 border: 0; 20 font-size: 100%; 21 font: inherit; 22 vertical-align: baseline; 23} 24 25html { 26 height: 100%; 27 margin: 0; 28} 29 30.jumbotron { 31 background-image: url(../storage/img/background.PNG); 32 background-position: center center; 33 background-repeat: no-repeat; 34 background-attachment: fixed; 35 background-size: cover; 36 height: auto; 37 z-index: 1; 38}
app.blade
<!DOCTYPE html> <html lang="ja"> <head> 略 <!-- jumbotron --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!--app/css参照--> <link rel="stylesheet" href="{{ asset('/css/app.css') }}"> <!--各bladeファイルでcssを指定--> @yield('css') </head> <body> @yield('content') <!-- JQuery --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script> </body>
top.blade
@extends('app') @section('title', 'top') @section('css') <link rel="stylesheet" href="{{ asset('/css/top.css') }}"> @endsection <body> <div class="jumbotron jumbotron-extend jumbotron-height"> <div class="container text-center text-light"> 略 </div> </div> </body>
top.css
.jumbotron-height { height: 100vh; }
試したこと
①app.css内の「@import url」のリンクが悪さをしている可能性等を考え、url内のテキストを抜き出しましたが、変化はありませんでした。
②jumbotronやリセットcssの記述をtop.cssに移すとソースには反映されますが、画像が404エラーで表示されない状況になります。
③ブラウザのキャッシュ削除も行い、更新してみましたが変化はありませんでした。
補足情報
上記の変更を行ってもソースコード内のapp.cssの記述に変化がないため、根本的にapp.cssの変更が反映されない状態なのではないかと考えれおります。
ですので、gitignoreファイルも添付いたします。
.gitignore
/node_modules /public/hot /vendor .env .env.backup .phpunit.result.cache Homestead.json Homestead.yaml npm-debug.log yarn-error.log
回答1件
0
自己解決
bootstrapのCSSファイルに直接追記していたことが原因だったようです。
追記する場合はsassに追記、コンパイルが必要だと理解しました。
今回は別途共通cssを作成、追記内容を記述することで問題解決しました。
投稿2021/05/07 04:58
総合スコア1
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。