Heroku - Yeoman - AngularJS Full-Stack - Bootstrap - NodeJS Stack を使用しています。
Heroku 上のデプロイメントは、'Grunt build' コマンドを使用してビルドされます。Heroku にデプロイすると、Web ページで CSS 画像をレンダリングする際に問題が発生します。ページ内の画像は表示されますが、CSS ファイルからのものは表示されません。
例: 以下のコードは機能しません
CSS
.aboutpage-header
{
height: 250px;
background: url('../images/slider-map.jpg') center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding-top: 50px;
}
HTML:
<header class="aboutpage-header">
<div class="container text-center">
<div class="row">
<div class="col-lg-12">
<h2 class="title">About Us</h2>
<h2 class="intro"><i class="fa fa-location-arrow"></i>Company<span class="highlight">IT</span>
are experts in bespoke software development and tailored consulting</h2>
</div>
</div>
</div>
</header>
ローカルでは実行時に問題なく動作しますGrunt serve
が、Heroku にデプロイするとすぐに CSS イメージが失われます。