当前位置： 文江博客话题详情

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

发布于 2024-11-10 02:14:56 字数 1361 浏览 0 评论 0原文

我正在尝试将 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。加载这些蓝图 CSS 文件的正确方法是什么？

目前，我的蓝图目录位于 app/assets/stylesheets/

我的 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。）

这给我留下了两个问题：

  1. 应该如何使用 SASS 应用 if lt IE 8 条件？
  2. 如何使用 SASS 加载打印格式的 css 文件（即 <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>）？
原文

I am trying to load a CSS framework, Blueprint, onto my Rails 3.1 application.

In Rails 3.0+, I would have something like this in my 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]-->

However, Rails 3.1 now uses SASS. What would be the proper way to load these Blueprint CSS files?

Currently, I have the blueprint dir in app/assets/stylesheets/

My app/assets/stylesheets/application.css looks like:

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

Should I do something with application.css so that it loads the necessary Blueprint files? If so, how?

Second, how would I provide some kind of condition to check for IE8, to load blueprint/ie.css?

EDIT:

Hmmm, reloading the app's web page again. Rails 3.1 does include the Blueprint files. Even if the css files are in a folder (in this case: app/assets/stylesheets/blueprint.)

Which leaves me with two questions

  1. How should one apply the if lt IE 8 condition using SASS?
  2. How does one load a css file for the print format (i.e. <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>) using SASS?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

别想她 2024-11-17 02:14:56

如果还有人想知道我最后是怎么做到的。

我删除了

 *= require_tree .

我的 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 '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]-->
...

希望这个帮助某人。

If anyone else is wondering how I did it in the end.

I removed

 *= require_tree .

My app/assets/stylesheets/application.css, now looks like:

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

And in app/views/layouts/application.html.erb, I have:

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

Hope this helps someone.

回复 原文
千纸鹤 2024-11-17 02:14:56

此博客有我认为的解决方案你正在寻找（就像我一样）。

不要将 blueprint 放在 app/assets 中，因为它会被 require_tree 吸收。不要将其放在 public 上，因为那不是资产的去向。将其放入 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 %>

This blog has the solution I think you're looking for (as I was).

Don't put the blueprint in app/assets because it will get sucked up in require_tree. Don't put it on public because that's not where assets go. Put it in vendor/assets/stylesheets then include them in application.html.erb before your own application.css as such:

<%= 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 %>
回复 原文
不如归去 2024-11-17 02:14:56

尽管 Rails 3.1 (RC) 允许使用 SASS 文件——但它并不强制这样做。
/public/stylesheets 中的文件仍然可以正常使用。

如果您希望激活 SASS 解析器（并使用新框架），请将 my_styles.css 重命名为 my_styles.css.scss 并将其放入 /app/assets/stylesheets 文件夹。然后在取消注释其中的 require_self / require_tree 行后，将您的 application.css 包含在 application.erb.html 中。

有关更多信息，这是我在快速谷歌搜索后找到的博客：http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html

至于 IE 8 的事情。 IE 中有一个错误并不总是执行条件，所以尝试


>

行为

尝试重置解析器来执行规则有点黑客

Even though Rails 3.1 (RC) allows use of SASS files-- it doesn't force it.
Files in your /public/stylesheets will still be served just fine.

If you wish to activate the SASS parser (and utilize the new framework), rename your my_styles.css to be my_styles.css.scss and put it in the /app/assets/stylesheets folder. Then include just your application.css in your application.erb.html after uncommenting out the require_self / require_tree lines in it.

For more info, here is a blog i pulled up after a quick google search: http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html

As for the IE 8 thing. There was a bug in IE not not always executing conditions, so try


<!--[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

回复 原文
白首有我共你 2024-11-17 02:14:56

以下是如何在 Rails 3.1 中使用 'blueprint-rails' gem

添加 'blueprint-rails' gem：

/Gemfile

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 之外的单独文件（默认情况下不包含在要求“蓝图”中）。因此，我们需要将它们添加到：

/Configuration/envoirnments/production.rb

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

然后运行：

bundle exec rake assets:precompile

Here's how to use the 'blueprint-rails' gem in Rails 3.1

Add 'blueprint-rails' gem:

/Gemfile

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

Add the common blueprint files to the manifest so they'll be precompiled into application.css:

/app/assets/stylesheets/application.css

 /*
  *= require 'blueprint'
  */

Add the application.css, which will contain the common blueprint files. Also add the print.css and ie.css conditionally:

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

Because of the conditionals print.css and ie.css are needed as separate files outside the application.css (and are not included by default in the require 'blueprint'). So we need to add them to:

/Configuration/envoirnments/production.rb

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

Then Run:

bundle exec rake assets:precompile
回复 原文
姐不稀罕 2024-11-17 02:14:56

另一种做事方式：

制作 app/assets/stylesheets/custom.css

然后更改 custom.css 以使用所需的文件：

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

最后更改布局中的链接标记（确保删除“应用程序”样式表）

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

A different way of doing things:

Make app/assets/stylesheets/custom.css

Then change custom.css to use the files needed:

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

Finally change the link tag in your layout (make sure to remove the "application" stylesheet)

= stylesheet_link_tag    "custom"

You can then add any other stylesheet manually (like "ie" specific) and other groups of stylesheets (like blueprint to load all blueprint files...)

You might also need (in your production.rb)

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile += %w(custom.css)
回复 原文
烟火散人牵绊 2024-11-17 02:14:56

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

Absolutely agree with your solution, don't think "require_tree" is a good practice in application.css, it will include anything, apparently it's too aggressive. I have struggled for a while, finally, I picked exactly the same solution, use application to include those scaffold styles and then use HTML tags to include some optional and conditional styles. Thanks.

回复 原文
东北女汉子 2024-11-17 02:14:56

翻译后的 SASS 文件的最终结果实际上是 css 文件，因此它不应该改变您包含样式表的方式。

此外，启用 SASS gem 并不意味着您不能同时使用普通的 css 文件。因此，包含蓝图 css 文件应该没有问题。

但是，如果您想纯粹使用 SASS，我建议您查看 compass gem，它对蓝图有很好的支持：

http:// compass-style.org/

它还包含对 ie 特定样式表和宏的支持。

The end result of a translated SASS files is actually css file, so it shouldn't change how you include your stylesheets.

Additionally, just because the SASS gem is enabled doesn't mean you can't use plain vanilla css files simultaneously. Therefore you should have no problem including the blueprint css files.

However, if you want to go purely SASS, I recommend checking out the compass gem which has nice support for blueprint:

http://compass-style.org/

It also contains support for ie-specific stylesheets and macros.

回复 原文
~没有更多了~

关于作者

陌生

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文