Szyny zdjęć i aktywa nie są ładowane prawidłowo

Question

Na przykład w mojej aplikacji Rails mam coś takiego:

.wax_seal { 
    background: url("wax-seal-small.png"); 
    display: block; 
    height: 100px; 
    margin: 0 auto; 
    width: 92px; 
} 

.wax_seal:active { 
    background: url('wax-seal-small-broken.png'); 
} 

aw moim pliku config/environments/production.rb:

# Disable Rails's static asset server (Apache or nginx will already do this). 
config.serve_static_assets = true 

ręcznie powoływania jej kompilację aktywów :

bundle exec rake assets:precompile 

a pliki są tworzone ze skrótów na końcu nazwy:

wax-seal-small-Uuhqwduhqwdoi234983jewf.png 

---

Więc to nie działa:

background: url("wax-seal-small.png"); 

Ale to działa prawidłowo (kiedy ręcznie typ go w Chrome):

background: url("wax-seal-small-Uuhqwduhqwdoi234983jewf.png"); 

---

Jakiego kroku tu brakuje? Jak mogę dodać moje reguły CSS do tego małego skrótu?

Dodanie config.assets.compile = true w config/environments/production.rb powoduje, że działa, ale czytałem w przewodniku po szynach, że jest to zła praktyka ze względu na znaczące trafienia wydajności.

Answer 1

Znalazłem to w dokumentacji edgerails: http://edgeguides.rubyonrails.org/asset_pipeline.html#css-and-sass

2.3.2 CSS i Sass

Podczas korzystania z rurociągu aktywów, ścieżki do aktywów musi być ponownie napisany i Sass-szyny zapewnia -url i -path pomocników (dzielonych w Sass, podkreślonych w Ruby) dla następujących klas aktywów: obraz, czcionka, wideo, audio, JavaScript i arkusz stylów.

• image-url("rails.png") becomes url(/assets/rails.png)
• image-path("rails.png") becomes "/assets/rails.png"

postać bardziej ogólne mogą być również używane, ale ścieżka składnik i klasa musi być zarówno określone: ​​

• asset-url("rails.png", image) becomes url(/assets/rails.png)
• asset-path("rails.png", image) becomes "/assets/rails.png"

Answer 2

Jeśli używasz Sass lub mniej można użyć background: image-url("wax-seal-small.png");

To będzie poprzedzić ścieżkę do pliku i dołączyć hash cache buster.

W przeciwnym razie wystarczy odwołać się do katalogu/assets. Na przykład. background: url("/assets/wax-seal-small.png");