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

问题描述

我不想让页面包含一个带有从中获取css的链接的样式标签，而我可以使用rails的stylesheet_link_tag helper方法将其添加到我的视图中，我希望直接在页面内部插入css.

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

但是我找不到任何能提供资产实际路径的Rails助手方法-physical_asset_path只是我发明的一种虚拟方法.

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.

使用Rails 3.2.x时，有人知道如何获取资产的物理路径吗?

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

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

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

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

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.

推荐答案

使用premailer或premailer-rails3

Use premailer or premailer-rails3

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

乔的书呆子党说:

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

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.

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

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

@media规则需要在电子邮件布局中内联，因为 Premailer尚无法处理位于单独的CSS文件中的邮件.

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

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

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.

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

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.

此外，我们在premailer-rails3上的分支假设您希望premailer进行 外出并实际下载链接的CSS文件.它应该是 可以使用Rails 3.1资产管道来获取已处理的CSS 无需下载.非常感谢乔丹·伊西普(Jordan Isip)，他 确保电子邮件看起来很棒，这真是超级烦人的工作 不同的客户在那里.编写CSS/HTML看起来不像 好玩.

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.

更新:

Roadie 似乎是一个更好的选择.感谢塞思·布罗(Seth Bro)指出了这一点.

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

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