Precompiling scss files for css shim

Question

I'm trying to use an html shim to include IE specific stylesheets. However, keep running into a "ActionView::Template::Error (ie/IE9.css isn't precompiled):" error once deployed to heroku. It seems to work locally though.

I've been trying different combinations and locations for the assets but nothing has worked so far.

My current config is below.

The IE specific files are located in:

app/assets/stylesheets/ie/index.css.scss
app/assets/stylesheets/ie/IE9.css.scss
app/assets/stylesheets/ie/IE8.css.scss
app/assets/stylesheets/ie/IE7.css.scss
app/assets/stylesheets/ie/IE6.css.scss

index.css.scss

/*
*= require_tree .
*/

application.html.haml

/[if gte IE 9]
  = stylesheet_link_tag "ie/IE9", media: "all"

application.css.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * 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 bootstrap
 *= require baseline
 *= require base10creations/gallery_required
 *= require ie
 *= require_self

*/

@import 'baseline.css.scss';
@import 'rem.css.scss';
@import 'common.css.scss';
@import 'admin.css.scss';
@import 'layout.css.scss';
@import 'pages.css.scss';
@import 'components.css.scss';
@import 'forms.css.scss';
@import 'override.css.scss';

Answer 1

I ended up getting just using a link tag instead of the rails stylesheet_link_tag. Though I have no idea why the stylesheet_link_tag was throwing a fit.

The working files are:

directory structure

app/assets/stylesheets/ie/index.css.scss
app/assets/stylesheets/ie/IE9.css.scss
app/assets/stylesheets/ie/IE8.css.scss
app/assets/stylesheets/ie/IE7.css.scss
app/assets/stylesheets/ie/IE6.css.scss

index.css.scss

/*
*= require_tree .
*/

application.html.haml

!!!
%html
  %head
    %meta{:charset => "UTF-8"}/
    %title= "Title"
    = stylesheet_link_tag "application", media: "all"
    = javascript_include_tag "application"
    = csrf_meta_tags
    /[if lt IE 9]
      %script{ src: "http://html5shim.googlecode.com/svn/trunk/html5.js", type: "text/javascript" }
    /[if gte IE 9]
      %link{ href: "ie/IE9.css" }
  %body
    #container
      = render :partial => "layouts/header"
      #content
        #messages
          - flash.each do |name, msg|
            = content_tag :div, msg, :id => "flash_#{name}"
        = yield
      = render :partial => "layouts/footer"

application.css.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * 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 bootstrap
 *= require baseline
 *= require base10creations/gallery_required
 *= require ie
 *= require_self

*/

@import 'baseline.css.scss';
@import 'rem.css.scss';
@import 'common.css.scss';
@import 'admin.css.scss';
@import 'layout.css.scss';
@import 'pages.css.scss';
@import 'components.css.scss';
@import 'forms.css.scss';
@import 'override.css.scss';

Answer 2

There are a couple of options in your case:

• in your application.css add :

  *= require_tree .

• use index file technique , which simply requires a new 'index' file in your ie/ directory with the same content (*= require_tree .);

I would suggest to remove

config.assets.precompile += ["IE9.css", "IE8.css", "IE7.css", "IE6.css"]

from your production.rb and your conditional call to IE shims in tour layout file application.html.haml.

EDIT: a better js for IE:

  /[if lt IE 9]
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>