Jak wczytać Framework CSS w Rails 3.1?

Próbuję załadować Framework CSS, Blueprint, do mojej aplikacji Rails 3.1.

W Rails 3.0+ miałbym coś takiego w moich widokach/layoutach / aplikacji.html.erb: 

  <%= stylesheet_link_tag 'blueprint/screen', 'application' %>
  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->

Jednak Rails 3.1 używa teraz SASS. Jaki byłby właściwy sposób ładowania tych plików CSS Blueprint?

Obecnie mam katalog blueprint w app / assets/stylesheets /

Moja aplikacja / zasoby / arkusze stylów / aplikacja.css wygląda tak: 

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
*/

Czy powinienem zrobić coś z podanie.css tak, że ładuje niezbędne pliki Blueprint? Jeśli tak, to w jaki sposób?

Po drugie, jak mam podać jakiś warunek, aby sprawdzić IE8, aby załadować blueprint / ie.css?

EDIT:

Hmmm, ponowne ładowanie strony internetowej aplikacji. Rails 3.1 zawiera pliki Blueprint. Nawet jeśli pliki css znajdują się w folderze (w tym przypadku: app/assets/stylesheets/blueprint.)

Co pozostawia mi dwa pytania

  1. jak należy stosować jeśli IE 8 warunek za pomocą SASS?
  2. Jak można załadować plik css dla formatu wydruku (tj. 'print' %>) używając SASS?
Author: Christian Fazzini, 2011-05-24
Source

7 answers

Mimo że Rails 3.1 (RC) pozwala na używanie plików SASS-nie wymusza tego. Pliki w /public/stylesheets nadal będą serwowane w sam raz.

Jeśli chcesz aktywować parser SASS (i wykorzystać nowy framework), Zmień nazwę my_styles.css na my_styles.css.scss i umieść go w folderze /app/assets/stylesheets. Następnie dołącz tylko swój application.css do swojego application.erb.html po wyróżnieniu linii require_self / require_tree w nim.

Aby uzyskać więcej informacji, oto blog, który znalazłem po szybkim wyszukiwaniu w google: http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html

Co do IE 8. W IE nie zawsze był błąd, więc spróbuj

<!--[if IE 8.000]><!--> <link href='./design/style-ie-8.css' rel='stylesheet' type='text/css' /> <!--<![endif]-->

Its a bit of hackery to try and reset the parser to execute the rule

 6
Author: colinross,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-12 04:49:59

Jeśli ktoś jeszcze zastanawia się, jak w końcu to zrobiłem.

Usunąłem 

 *= require_tree .

My app/assets/stylesheets/application.css , teraz wygląda tak: 

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require 'blueprint/screen'
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

Oraz w app / views / layouts / application.html.erb , mam: 

<html>
<head>
  <title><%= yield(:title).present? ? yield(:title) : 'Foobar' %></title>
  <%= favicon_link_tag %>

  <%= stylesheet_link_tag    'application' %>
  <%= javascript_include_tag 'application' %>

  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->
...
Mam nadzieję, że to komuś pomoże.
 24
Author: Christian Fazzini,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-08 06:24:27

Ten blog ma rozwiązanie, którego myślę, że szukasz (tak jak ja).

Nie umieszczaj blueprint w app/assets, ponieważ zostanie wessany require_tree. Nie zakładaj tego public, bo nie tam idą aktywa. Umieść je w vendor/assets/stylesheets następnie dołącz je do application.html.erb przed własnym application.css jako takie: 

<%= stylesheet_link_tag 'blueprint/screen', :media => "screen, projection" %>
<%= stylesheet_link_tag 'blueprint/print', :media => "print" %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie', :media => "screen, projection" %><![endif]-->
<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
 16
Author: Turadg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-04 19:13:59

W Rails 3.1 można użyć klejnotu 'blueprint-rails'.]}

Dodaj klejnot' blueprint-rails':

/Gemfile 

gem 'blueprint-rails', , '~> 0.1.2'

Dodaj wspólne pliki schematów do manifestu, aby zostały wstępnie skompilowane do aplikacji.css:

/app / assets/stylesheets / application.css 

 /*
  *= require 'blueprint'
  */

Dodaj aplikację.css, który będzie zawierał wspólne pliki schematów. Dodaj również wydruk.css i ie.css warunkowo:

/Views / layouts / application.html.erb 

<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>
<!--[if lt IE 8]>
  <%= stylesheet_link_tag 'blueprint/ie' %>
<![endif]-->

Ze względu na warunki wydruku.css i ie.css są potrzebne jako oddzielne pliki poza aplikacją.css (i nie są domyślnie zawarte w wymaganym 'blueprint'). Musimy więc dodać je do:

/Konfiguracja / środowisko / produkcja.rb 

# Separate assets
config.assets.precompile += ['blueprint/print.css', 'blueprint/ie.css']

Następnie Uruchom: 

bundle exec rake assets:precompile
 5
Author: wintersolutions,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-24 03:09:44

Inny sposób robienia rzeczy:

Make app/assets/stylesheets / custom.css

Następnie zmień custom.css do użycia potrzebnych plików: 

/*
 *= require_self
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

Na koniec Zmień znacznik łącza w swoim układzie (pamiętaj, aby usunąć arkusz stylów "aplikacja") 

= stylesheet_link_tag    "custom"

Możesz następnie dodać dowolny inny arkusz stylów ręcznie (jak specyficzny dla ie) i inne grupy arkuszy stylów (jak blueprint, aby załadować wszystkie pliki blueprint...)

Możesz również potrzebować (w Twoim produkcja.rb) 

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile += %w(custom.css)
 5
Author: montrealmike,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-26 13:10:22

Absolutnie zgadzam się z Twoim rozwiązaniem, nie myśl ,że "require_tree"jest dobrą praktyką w stosowaniu.css, będzie zawierał wszystko, najwyraźniej jest zbyt agresywny. Walczyłem przez jakiś czas, w końcu wybrałem dokładnie to samo rozwiązanie, użyj aplikacji do włączenia tych stylów rusztowania, a następnie użyj znaczników HTML, aby dołączyć niektóre opcjonalne i warunkowe style. Dzięki.

 2
Author: Leon Guan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-06 07:36:57

Efektem końcowym przetłumaczonych plików SASS jest w rzeczywistości plik css, więc nie powinno to zmieniać sposobu dołączania arkuszy stylów.

DODATKOWO, tylko dlatego, że Gem SASS jest włączony, nie oznacza, że nie możesz używać plików css w stylu waniliowym jednocześnie. Dlatego nie powinieneś mieć problemu z włączeniem plików CSS blueprint.

Jednak, jeśli chcesz przejść czysto SASS, polecam sprawdzenie Compass gem, który ma ładne wsparcie dla

Http://compass-style.org/

Zawiera również wsparcie dla arkuszy stylów i makr specyficznych dla ie.

 -1
Author: twmills,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-24 18:52:03