Question

我正在尝试使用html填充程序来包含IE特定的样式表。但是，继续运行“ActionView :: Template :: Error（即/ IE9.css未预编译）：”错误一旦部署到heroku。它似乎在本地工作。

我一直在为资产尝试不同的组合和位置，但到目前为止还没有任何工作。

我当前的配置如下。

IE特定文件位于：

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

您的案例有几种选择：

在application.css添加：

* = require_tree。
使用index file technique，只需要ie/目录中的新“索引”文件，内容相同（*= require_tree .）;

我建议删除

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

来自production.rb的

以及您在浏览布局文件application.html.haml中对IE填充的条件调用。

编辑：IE的更好的js：

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

Answer 2

我最终只使用了link标签而不是rails stylesheet_link_tag。虽然我不知道为什么stylesheet_link_tag正在投入合适。

工作文件是：

目录结构

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

预编译css shim的scss文件

2 个答案: