In my Rails 4 app, I am trying to implement a conditional to load different stylesheets for Internet Explorer VS. other browsers.
I have an app/views/layout/_header.html.erb partial with:
<head>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<!--[if !IE]><!-->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'ie', media: 'all', 'data-turbolinks-track' => true %>
<!--<![endif]-->
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
And I have the following stylesheets in app/assets/stylesheets:
custom / # with all my model-specific stylesheets here, such as posts.scss
application.scss
custom.scss
ie.scss
In application.scss I have:
@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap/theme";
@import "bootstrap-datetimepicker";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "simple_calendar";
@import "custom.scss";
@import "custom/**/*";
Note: the IE-specific rules in ie.scss are very light, less than 20 lines of code.
However, when I launch the app in Internet Explorer, the CSS rules from ie.scss are not taken into account.
How can I make the ie.scss file load when the user launches the app in Internet Explorer?
