2

Amazon S3をCDNアセットホストとして使用するために、asset_sync gemの使用を開始しました（HerokuとRoRを使用しています）。Twitter Bootstrapで使用しているアイコンを除いて、すべてのアセットが正しく読み込まれています（アイコンがあるべき場所に空白があります）。

Herokuの複数アセットプリプロセッササポートを使用してみました。

app / asset / stylesheets / custom.css.scss.erb

background-image: url(<%= asset_path "../img/glyphicons-halflings.png"%>);

また、glyphicons-halflings.pngを直接imagesフォルダーに移動し、そこで参照してみました。

app / asset / stylesheets / custom.css.scss.erb

background-image: url(<%= asset_path "/assets/glyphicons-halflings.png"%>);

app / asset / stylesheets / custom.css.scss

background-image: url("/assets/glyphicons-halflings.png");

しかし、私はそれを機能させる方法を見つけていません。TwitterBootstrapアイコンをS3/Herokuで正常に機能させる方法についての提案をいただければ幸いです。

編集：私は使用しています：gem 'bootstrap-sass', '~> 2.0.2'

4

5 に答える 5

2

を使用している場合gem 'bootstrap-sass'、以下は私のために働いた解決策です。

まず、ブートストラップWebサイトからブートストラップをダウンロードします。2つのアイコン.pngファイル（glyphicons-halflings.pngとglyphicons-halflings-white.png）を抽出し、アプリの画像ディレクトリ（app / images）にコピーします。

custom.css.scssファイル（アプリによっては異なる名前になる場合があります）で、スタイルシートの上部に次のように入力して（ブートストラップをインポートする前に）、アイコンの画像パスを上書きします。

 $iconSpritePath: url('/assets/glyphicons-halflings.png');
 $iconWhiteSpritePath: url('/assets/glyphicons-halflings-white.png');

 @import "bootstrap";
于 2012-09-24T02:35:07.067 に答える
1

たとえば、Railsイメージヘルパーを使用します。

background-image: image-url("glyphicons-halflings.png");

Railsコンソールで検索パスを確認することもできます。

Rails.application.config.assets.paths

幸運を！

于 2012-06-07T21:29:19.117 に答える
0

アセットホストを設定しましたか？

https://devcenter.heroku.com/articles/cdn-asset-host-rails31#configuration

于 2012-05-21T08:41:27.037 に答える
0

実際に使用されている背景画像のURLを確認しましたか？開発環境でCDNをテストしようとしたときも、同じ動作をしました。結局、application.cssで間違ったバケットが使用されたことがわかりました

于 2012-06-29T07:57:45.320 に答える
0

bootstrap-sass gemを使用していない人のために、デフォルトのブートストラップcssファイル拡張子をscssに変更し、次のコードを編集してrailsasset_urlメソッドを使用することで、ようやく動作するようになりました。コードで@font-faceを検索して、これを試してください。 

@font-face {
 font-family: 'Glyphicons Halflings';

 src: asset_url('glyphicons-halflings-regular.eot');
 src: asset_url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), asset_url('glyphicons-halflings-regular.woff') format('woff'), asset_url('glyphicons-halflings-regular.ttf') format('truetype'), asset_url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

コミットしてherokuにプッシュします。私のために働いた。これが誰かに役立つことを願っています

于 2014-11-06T14:25:32.360 に答える