How does one load a CSS framework in Rails 3.1?

2019-01-31 17:24发布

站内文章 / 后端开发

76 0

我欲成王，谁敢阻挡

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

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

回答1:

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

 <link href='./design/style-ie-8.css' rel='stylesheet' type='text/css' /> 

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

回答2:

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.

回答3:

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

回答4:

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

回答5:

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)

回答6:

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.

回答7:

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.