Chr*_*ini 26 blueprint-css ruby-on-rails-3 asset-pipeline
我正在尝试将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 /中有蓝图目录
我的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做些什么来加载必要的Blueprint文件？如果是这样,怎么样？
第二,我如何提供某种条件来检查IE8,加载blueprint/ie.css？
编辑:
嗯,再次重新加载应用程序的网页.Rails 3.1确实包含Blueprint文件.即使css文件位于文件夹中(在这种情况下:app/assets/stylesheets/blueprint.)
这让我有两个问题
Chr*_*ini 24
如果有人想知道我最终是怎么做到的.
我删除了
*= 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]-->
...
希望这有助于某人.
Tur*_*adg 16
这个博客有我认为你正在寻找的解决方案(就像我一样).
不要放入blueprint,app/assets因为它会被吸入require_tree.不要戴上它,public因为那不是资产的去处.把它放进去,vendor/assets/stylesheets然后把它们包括在application.html.erb你自己之前application.css:
<%= 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(RC)允许使用SASS文件 - 它也不会强迫它.您/public/stylesheets遗嘱中的文件仍可以正常使用.
如果您希望激活SASS解析器(并使用新框架),请将您重命名my_styles.css为my_styles.css.scss并将其放入/app/assets/stylesheets文件夹中.然后包括你刚才application.css在您的application.erb.html它在取消了require_self/require_tree行之后.
有关更多信息,请点击此处查看以下博客文章: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]-->
尝试重置解析器来执行规则有点麻烦
一种不同的做事方式:
制作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)
以下是如何在Rails 3.1中使用'blueprint-rails'宝石
添加'blueprint-rails'宝石:
/的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之外的单独文件(默认情况下不包含在require'blueprint'中).所以我们需要将它们添加到:
/Configuration/envoirnments/production.rb
# Separate assets
config.assets.precompile += ['blueprint/print.css', 'blueprint/ie.css']
然后运行:
bundle exec rake assets:precompile
| 归档时间： |
|
| 查看次数： |
18658 次 |
| 最近记录： |