使用 rails 资产管道时如何内联 css [英] How to inline css when using the rails asset pipeline

问题描述

我不想让页面包含带有获取 css 链接的样式标签，我可以使用 rails 的 stylesheet_link_tag 辅助方法将其添加到我的视图中，我想让 css 内联直接在页面内.

这是我目前想到的:

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

但是我找不到任何 rails 的辅助方法来为我提供资产的物理路径 - physical_asset_path 只是我发明的一种虚拟方法.

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

是否有更简单/更好的方法来获取样式表 - 从 common rails 资产路径内的 css 文件 - 内联?

用例:大多数电子邮件客户端在未经用户确认的情况下不会访问外部资源(如 css、图像).因此，为了正确显示电子邮件，我需要在电子邮件的 HTML 中嵌入 CSS.

解决方案

使用 premailer 或 premailer-rails3

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

乔的书呆子派对说:

<块引用>

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

%html％头= stylesheet_link_tag '电子邮件'%style{:type =>文本/CSS"}:sass@media all 和(最大宽度:480px)表#容器宽度:自动！重要最大宽度:600 像素！重要...等移动代码％身体电子邮件正文在这里.％桌子很多桌子.

<块引用>

我们在 HTML 中包含了一个样式表.Premailer 下载它，处理它，并在 HTML 中内联插入 css 规则.

@media 规则需要内联在电子邮件布局中，因为Premailer 还不能处理单独的 css 文件中的那些.

我们使用 premailer-rails3 将 Premailer 集成到 Rails 3 中.不幸的是，我们在 premailer 中发现了一堆错误，并且premailer-rails3.我们的项目分支位于https://github.com/joevandyk/premailer 和https://github.com/joevandyk/premailer-rails3.叉子修复了一些编码错误，删除一些奇怪的 css 处理内容premailer-rails3，允许 premailer 不剥离嵌入电子邮件布局中的规则以及其他一些内容.

我们还在 sass-rails 中发现了一个错误，您无法在其中嵌入图像 URL内联 sass 代码.请参阅 https://github.com/rails/sass-rails/issues/71Premailer-rails3 在电子邮件实际发送时挂钩到 ActionMailer交付，而不仅仅是生成.运行测试时，电子邮件不是实际发送，因此 premailer-rails3 钩子在此期间不会运行测试.我还没花时间看看是否有可能获得premailer 处理在测试期间运行，但这将是一个很好的要做的事情.

此外，我们在 premailer-rails3 上的分支假设您希望 premailer出去实际下载链接的 CSS 文件.它应该是可以使用 Rails 3.1 资产管道来获取处理过的 css无需下载.特别感谢 Jordan Isip确保所有电子邮件看起来都很棒那里的不同客户.写那个 CSS/HTML 没有看很有趣.

更新:

Roadie 似乎是更好的选择.感谢赛斯兄弟指出.

Instead of having the page include a style tag with a link where to get the css from, which I could add to my view using rails' stylesheet_link_tag helper method, I want to have the css inline directly inside the page.

This is what I came up with so far:

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

But I can't find any rails' helper method which gives me the physical path of an asset - physical_asset_path is just a dummy method invented by me.

Anybody knows how to get the physical path of an asset when using rails 3.2.x?

Is there an easier/ better way to get stylesheets - from css files inside the common rails assets paths - inline?

Use case: most email clients don't access external sources (like css, images) without user confirmation. So to get the emails properly displayed I need to embed the CSS inside the emails' HTML.

解决方案

Use premailer or premailer-rails3

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

Joe's Nerd Party say:

We also used the Premailer gem to automatically inline the linked stylesheet in the email views. Our email layout looks something like:

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

We include a stylesheet in the HTML. Premailer downloads it, processes it, and inserts the css rules inline in the HTML.

The @media rules need to be inline in the email layout, since Premailer can’t handle those being in a separate css file yet.

We use premailer-rails3 to integrate Premailer into Rails 3. Unfortunately, we found a bunch of bugs in premailer and premailer-rails3. Our forks of the projects are at https://github.com/joevandyk/premailer and https://github.com/joevandyk/premailer-rails3. The forks fix some encoding bugs, remove some weird css processing stuff done by premailer-rails3, allow premailer to not strip out embedded rules in the email layouts, and some other things.

We also found a bug in sass-rails, where you can’t embed image-urls in inline sass code. See https://github.com/rails/sass-rails/issues/71 Premailer-rails3 hooks into ActionMailer when the email actually being delivered, not just generated. When running tests, email is not actually sent, so the premailer-rails3 hooks don’t get ran during tests. I haven’t spent the time to see if it’s possible to get the premailer processing to run during tests, but that would be a nice thing to do.

Also, our forks on premailer-rails3 assume that you want premailer to go out and actually download the linked CSS files. It should be possible to use the Rails 3.1 asset pipeline to get the processed css without downloading it. A very special thanks goes to Jordan Isip who did the super annoying job of making sure the emails look great in all the different clients out there. Writing that CSS/HTML did not look fun.

Update:

Roadie appears to be a better option. Thanks to Seth Bro for pointing it out.

这篇关于使用 rails 资产管道时如何内联 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！