如何在使用rails资产管道时内联css

Question

而不是让页面包含一个样式标记,其中包含从哪里获取css的链接,我可以使用rails的stylesheet_link_tag帮助方法将其添加到我的视图中,我希望直接在页面内部使用css内联.

这是我到目前为止提出的:

%style(type="text/css")=File.read(physical_asset_path("email.css"))

但我找不到任何轨道的辅助方法,它给了我一个资产的物理路径 - physical_asset_path只是我发明的虚拟方法.

有人知道如何在使用rails 3.2.x时获取资产的物理路径吗？

是否有更简单/更好的方式来获取样式表 - 来自共轨资产路径中的css文件 - 内联？

使用案例:大多数电子邮件客户端在没有用户确认的情况下不访问外部源(如css,图像).因此,要正确显示电子邮件,我需要将CSS嵌入电子邮件的HTML中.

Answer 1

Rails.application.assets.find_asset('email').to_s 将编译后的资产作为字符串返回.

Answer 2

使用预制商或premailer-rails3

https://github.com/fphilipe/premailer-rails3 或 https://github.com/alexdunae/premailer

乔的书呆子党说:

我们还使用Premailer gem自动内联电子邮件视图中的链接样式表.我们的电子邮件布局类似于:

%html
  %head
    = stylesheet_link_tag 'email'

    %style{:type => "text/css"}
      :sass
        @media all and (max-width: 480px)
          table#container
            width: auto !important
            max-width: 600px !important
         ... and so on for the mobile code

    %body 
      Email body here.
      %table
        Lots of tables.

我们在HTML中包含样式表.预编译器下载,处理它,并在HTML中内嵌插入css规则.

@media规则需要在电子邮件布局中内联,因为Premailer无法处理那些位于单独的css文件中的内容.

我们使用premailer-rails3将Premailer集成到Rails 3.不幸的是,我们在premailer和premailer-rails3中发现了一堆bug.我们的项目分支在 https://github.com/joevandyk/premailer和 https://github.com/joevandyk/premailer-rails3.这些forks修复了一些编码错误,删除了premailer-rails3完成的一些奇怪的css处理,允许预编译器不删除电子邮件布局中的嵌入式规则,以及其他一些东西.

我们还在sass-rails中发现了一个错误,你无法在内联sass代码中嵌入image-urls. 当电子邮件实际发送时,请参阅https://github.com/rails/sass-rails/issues/71 Premailer-rails3挂钩到ActionMailer,而不仅仅是生成.运行测试时,实际上并未发送电子邮件,因此premailer-rails3挂钩在测试期间不会运行.我没有花时间看看是否有可能在测试期间运行预编译器处理,但这将是一件好事.

另外,我们在premailer-rails3上的分支假设您希望预编程器出去并实际下载链接的CSS文件.应该可以使用Rails 3.1资产管道来获取已处理的css而无需下载它.非常特别的感谢Jordan Isip做了一个超级烦人的工作,确保电子邮件在所有不同的客户端看起来很棒.写CSS/HTML看起来并不好玩.

更新:

Roadie似乎是一个更好的选择.感谢Seth Bro指出它.

Answer 3

(对不起,这个答案在html,HAML但不是......但对于HAML粉丝来说这应该不是问题)

寻找一种方式来内联时,我发现这个问题,Sass编译成css成html用于创建HTML电子邮件模板.

结合上述建议,我在head我的html页面中使用了以下代码:

<style type="text/css">
  <%= Rails.application.assets['path/to/sass/file'].to_s.html_safe %>
</style>

此代码编译Sass为CSS,然后将css插入到<style>标记中.在html_safe确保任何引号('和")或尖括号(>和<在CSS中使用)不逃脱.

该path/to/sass/file是一样创建一个样式表链接标记时,你可以使用:

<%= stylesheet_link_tag 'path/to/sass/file', :media => 'all' %>

Answer 4

Rails.application.assets['asset.js'] 将仅在本地环境中工作,因为在生产和登台环境中禁用了rails资产编译.

Rails.application.assets_manifest.find_sources('asset.js').first.to_s.html_safe 应该在使用rails资产管道时用于内联css.

Answer 5

无法对 Seth Bro 的答案添加评论。你最好使用#[]而不是#find_asset: Rails.application.assets["email"].to_s。

关于“资产不会被压缩”。这不是真的。如果启用了压缩器（在 Rails 配置中），它将被压缩：

Rails.application.configure do
  # ...
  config.assets.css_compressor = :sass
  config.assets.js_compressor  = :uglify
end

请注意，默认情况下，此功能在生产环境中启用 ( config/environments/production.rb)。