Używanie potoku zasobów Rails 3.1 do warunkowego używania określonego CSS

166

Jestem w trakcie tworzenia mojej pierwszej solowej aplikacji Rails przy użyciu Rails 3.1.rc5. Mój problem polega na tym, że chcę, aby moja witryna warunkowo renderowała różne pliki CSS. Używam Blueprint CSS i staram się renderować koła zębate / szyny przez screen.csswiększość czasu, print.csstylko podczas drukowania i ie.csstylko wtedy, gdy strona jest otwierana z przeglądarki Internet Explorer.

Niestety, domyślne *= require_treepolecenie w application.cssmanifeście zawiera wszystko w assets/stylesheetskatalogu i powoduje nieprzyjemne pomieszanie CSS. Moje obecne obejście to rodzaj metody brutalnej siły, w której określam wszystko indywidualnie:

W application.css:

*= require_self
*= require home.css
...
*= require blueprint/screen.css

W moich arkuszach stylów częściowe (haml):

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

To działa, ale nie jest szczególnie ładne. Poświęciłem kilka godzin na szukanie, aby dojść tak daleko, ale mam nadzieję, że jest na to jakiś łatwiejszy sposób, który właśnie przegapiłem. Gdybym mógł nawet selektywnie renderować niektóre katalogi (bez włączania podkatalogów), cały proces byłby znacznie mniej sztywny.

Dzięki!

talon55
źródło

Odpowiedzi:

223

Odkryłem sposób, aby uczynić go mniej sztywnym i odpornym na przyszłość, nadal korzystając z potoku aktywów, ale zgrupując arkusze stylów. Nie jest to dużo prostsze niż twoje rozwiązanie, ale to rozwiązanie umożliwia automatyczne dodawanie nowych arkuszy stylów bez konieczności ponownej edycji całej struktury.

To, co chcesz zrobić, to użyć oddzielnych plików manifestu, aby rozbić rzeczy. Najpierw musisz ponownie uporządkować swój app/assets/stylesheetsfolder:

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

Następnie edytujesz trzy pliki manifestu:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

Następnie zaktualizuj plik układu aplikacji:

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

Na koniec nie zapomnij dołączyć tych nowych plików manifestu do swojego config / environment / production.rb:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

Aktualizacja:

Jak zauważył Max, jeśli przestrzegasz tej struktury, musisz pamiętać o odniesieniach do obrazów. Masz kilka możliwości:

  1. Przenieś obrazy, aby postępować zgodnie z tym samym wzorem
    • Pamiętaj, że działa to tylko wtedy, gdy nie wszystkie obrazy są udostępniane
    • Spodziewam się, że dla większości nie będzie to starter, ponieważ zbytnio komplikuje sprawę
  2. Kwalifikuj ścieżkę obrazu:
    • background: url('/assets/image.png');
  3. Użyj pomocnika SASS:
    • background: image-url('image.png');
gcastro
źródło
1
Chociaż jest to ładna organizacja plików, uważam, że nadal rozwiązuje zasadniczy problem w taki sam sposób, jak samo pytanie.
semperos
@semperos, masz rację, że kształt rozwiązania jest zasadniczo taki sam, ale moja propozycja nadal pozwala nam wykorzystać potok aktywów dla wszystkich arkuszy stylów. Nie jestem pewien, czy istnieje inny sposób wybiórczego włączenia części stylów, chyba że jest to w oddzielnym arkuszu stylów. Przynajmniej w ten sposób kompilujemy tylko do kilku plików CSS.
gcastro
5
Coś takiego w przewodniku Rails Asset Pipeline byłoby właściwie dobre. dzięki
Bashar Abdullah
3
Jest jednak pewien problem: jeśli zastosujesz się do tej struktury i użyjesz prostych .cssplików, wszystkie twoje obrazy zostaną zepsute. Np. background: url('image.png')Zostanie przetłumaczone na ścieżkę /assets/all/image.png(pamiętaj o wszystkim na ścieżce). Zamiast tego działa: background: url('/assets/image.png). Jeśli istnieje prostsze rozwiązanie tego problemu, opublikuj je. Poza używaniem SASS, który ma metody pomocników, które prawdopodobnie poprawnie rozwiązują ścieżkę.
Maksymalnie
1
@ExiRe, tak. Wszelkie arkusze stylów lub pliki / manifesty JS, które nie są zgodne ze standardowym wzorcem, należy dodać do tablicy prekompilacji (patrz: guide.rubyonrails.org/asset_pipeline.html#precompiling-assets )
gcastro
10

Dzisiaj napotkałem ten problem.

Skończyło się na umieszczeniu wszystkich arkuszy stylów specyficznych dla IE w lib / asset / stylesheets i utworzeniu jednego pliku manifestu dla każdej wersji IE. Następnie w application.rb dodaj je do listy rzeczy do prekompilacji:

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

Uwzględnij warunkowo te pliki manifestu w swoich układach i gotowe!

Anthony Alberto
źródło