How does one load a CSS framework in Rails 3.1?

2019-01-31 17:11发布

站内问答 / 前端开发
1723 7 5

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?

7条回答
We Are One
2楼-- · 2019-01-31 17:48

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
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
3楼-- · 2019-01-31 17:49

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.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
4楼-- · 2019-01-31 17:49

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) 举报
\"骚年 ilove
5楼-- · 2019-01-31 17:51

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 %>
查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
6楼-- · 2019-01-31 17:56

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)
查看更多
0人赞 添加讨论(0) 举报
聊天终结者
7楼-- · 2019-01-31 17:58

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

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)