Rails 4 x SASS：在 Internet Explorer 中加载特定样式表答案

【问题标题】：Rails 4 x SASS: load specific stylesheet in Internet ExplorerRails 4 x SASS：在 Internet Explorer 中加载特定样式表
【发布时间】：2015-11-22 16:28:49
【问题描述】：

在我的 Rails 4 应用程序中，我试图实现一个条件来为 Internet Explorer VS 加载不同的样式表。其他浏览器。

我有一个app/views/layout/_header.html.erb 部分：

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

我在app/assets/stylesheets 中有以下样式表：

custom / # with all my model-specific stylesheets here, such as posts.scss
application.scss
custom.scss
ie.scss

在application.scss 我有：

@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/**/*";

注意：ie.scss 中的 IE 专用规则非常简洁，不到 20 行代码。

但是，当我在 Internet Explorer 中启动应用程序时，ie.scss 中的 CSS 规则未被考虑在内。

当用户在 Internet Explorer 中启动应用程序时，如何使 ie.scss 文件加载？

【问题讨论】：

你写的IE条件是除了IE以外的所有东西，改成。不要两次包含应用程序样式表。
关注blog 了解条件样式表语法。
太棒了，非常感谢。这解决了问题。我还必须将Rails.application.config.assets.precompile += %w( ie.css ) 添加到config/initializers/assets.rb，现在一切正常。随意建议这个解决方案作为答案，我很乐意接受它。

标签： css ruby-on-rails internet-explorer ruby-on-rails-4 sass

【解决方案1】：

对于所有 IE 版本：

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<!-- Calling application stylesheet file only once -->
<!--[if IE]> 
  <%= stylesheet_link_tag 'ie', media: 'all', 'data-turbolinks-track' => true %> 
<![endif]-->

您可以将其更改为：

Rails.application.config.assets.precompile += %w( *.css )

这样您就不必单独添加每个文件。我在项目中通常使用的：

Rails.application.config.assets.precompile += %w( *.js *.css *.png *.jpg *.jpeg )

【讨论】：