如何在Rails 3.1中加载CSS框架？

| 我正在尝试将CSS框架Blueprint加载到我的Rails 3.1应用程序中。在Rails 3.0+中，我的views / layouts / application.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]-->

但是，Rails 3.1现在使用SASS。加载这些Blueprint CSS文件的正确方法是什么？目前，我在app / assets / stylesheets /中有蓝图目录我的应用程序/资产/样式表/application.css如下所示：

/*
 * 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 . 
*/

我应该对application.css做些什么，以便它加载必要的蓝图文件吗？如果是这样，怎么办？其次，如何提供某种条件来检查IE8，以加载blueprint / ie.css？编辑：嗯，请重新加载应用程序的网页。 Rails 3.1确实包含了蓝图文件。即使css文件位于文件夹中（在这种情况下：app / assets / stylesheets / blueprint。）这给我两个问题如何使用SASS应用if lt IE 8条件？如何使用SASS加载打印格式的CSS文件（即<％= stylesheet_link_tag \'blueprint / print \'，\'media \'=> \'print \'％>）？

已邀请:

7 个回复

眠皇

即使Rails 3.1（RC）允许使用SASS文件，也不会强制使用。 /public/stylesheets中的文件仍然可以放心使用。如果要激活SASS解析器（并使用新框架），请将my_styles.css重命名为my_styles.css.scss，并将其放在/app/assets/stylesheets文件夹中。然后在取消注释require_self / require_tree行之后，在include7ѭ中仅包含application.css。有关更多信息，这是我在Google快速搜索后创建的博客：http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html 至于IE 8的事情。 IE中的错误并非总是执行条件，因此请尝试

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

尝试重设解析器以执行规则有点骇人听闻

抚驰

如果还有其他人想知道我最终是如何做到的。我删除了

 *= require_tree .

我的应用程序/资产/样式表/application.css现在看起来像：

/*
 * 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\'
*/

在app / views / layouts / application.html.erb中，我有：

<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]-->
...

希望这对某人有帮助。

喷乡顾沥沪

这个博客提供了我认为您正在寻找的解决方案（就像以前一样）。不要将ѭ12放在ѭ13中，因为它会在ѭ14中被吸住。不要把它放在15英镑上，因为那不是资产的去向。将其放在vendor/assets/stylesheets中，然后在您自己的application.css中将它们包括在application.html.erb中，例如：

<%= 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 %>

嘘崇蔡对

这是在Rails 3.1中使用'blueprint-rails \'gem的方法添加\'blueprint-rails \'gem： /宝石文件

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

将常见的蓝图文件添加到清单中，以便将它们预编译到application.css中： /app/assets/stylesheets/application.css

 /*
  *= require \'blueprint\'
  */

添加application.css，其中将包含常见的蓝图文件。还要有条件地添加print.css和ie.css： /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]-->

由于有条件，print.css和ie.css需要作为application.css之外的单独文件使用（默认情况下，它们不在require \'blueprint \'中）。因此，我们需要将它们添加到： /Configuration/envoirnments/production.rb

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

然后运行：

bundle exec rake assets:precompile

括宠

一种不同的处理方式：制作应用程序/资产/样式表/custom.css 然后更改custom.css以使用所需的文件：

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

最后，更改布局中的链接标记（确保删除\“ application \”样式表）

= stylesheet_link_tag    \"custom\"

然后，您可以手动添加任何其他样式表（例如特定于\“ ie \”）和其他样式表组（例如用于加载所有蓝图文件的蓝图...）您可能还需要（在production.rb中）

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile += %w(custom.css)

甲车劲

绝对同意您的解决方案，不要认为“ require_tree”在application.css中是一种好习惯，它将包含任何内容，显然太激进了。我经过了一段时间的努力，最后，我选择了完全相同的解决方案，使用应用程序来包含那些脚手架样式，然后使用HTML标签来包含一些可选和条件样式。谢谢。

蹄寄噬非芹

转换后的SASS文件的最终结果实际上是css文件，因此它不应更改包含样式表的方式。此外，仅因为启用了SASS gem并不意味着您不能同时使用普通的香草CSS文件。因此，包括蓝图css文件在内，您应该没有问题。但是，如果您只想使用SASS，建议您检查一下指南针gem，它对蓝图有很好的支持： http://compass-style.org/ 它还包含对特定于样式的样式表和宏的支持。

要回复问题请先登录或注册

如何在Rails 3.1中加载CSS框架？

7 个回复

发起人

blueprint_css

ruby_on_rails_3

asset_pipeline

问题状态

如何在Rails 3.1中加载CSS框架？

与内容相关的链接

7 个回复

发起人

blueprint_css

ruby_on_rails_3

asset_pipeline

问题状态