26

ページに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を使用するときに、アセットの物理パスを取得する方法を知っている人はいますか？

一般的なRailsアセットパス内のcssファイルからインラインでスタイルシートを取得するためのより簡単でより良い方法はありますか？

使用例：ほとんどの電子メールクライアントは、ユーザーの確認なしに外部ソース（css、画像など）にアクセスしません。したがって、電子メールを正しく表示するには、電子メールのHTML内にCSSを埋め込む必要があります。

4

9 に答える 9

64

Rails.application.assets.find_asset('email').to_sコンパイルされたアセットを文字列として返します。

于 2012-08-01T20:37:37.927 に答える
16

premailerまたは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にスタイルシートを含めます。Premailerはそれをダウンロードして処理し、cssルールをHTMLにインラインで挿入します。

Premailerはまだ別のcssファイルにあるルールを処理できないため、@mediaルールはメールレイアウトでインラインにする必要があります。

premailer-rails3を使用してPremailerをRails3に統合します。残念ながら、premailerとpremailer-rails3に多数のバグが見つかりました。プロジェクトのフォークは https://github.com/joevandyk/premailerと https://github.com/joevandyk/premailer-rails3にあります。フォークは、いくつかのエンコーディングのバグを修正し、premailer-rails3によって行われるいくつかの奇妙なcss処理を削除し、premailerが電子メールレイアウトに埋め込まれたルールを削除しないようにします。

また、sass-railsにバグがあり、インラインsassコードにimage-urlを埋め込むことができません。https://github.com/rails/sass-rails/issues/71を参照してください 。Premailer-rails3は、電子メールが生成されただけでなく、実際に配信されたときにActionMailerにフックします。テストを実行する場合、電子メールは実際には送信されないため、テスト中にpremailer-rails3フックは実行されません。テスト中にプレメーラー処理を実行できるかどうかを確認するために時間を費やしたことはありませんが、それは良いことです。

また、premailer-rails3のフォークは、premailerを外に出して、リンクされたCSSファイルを実際にダウンロードすることを前提としています。Rails 3.1アセットパイプラインを使用して、ダウンロードせずに処理済みのcssを取得できるはずです。非常に特別な感謝は、そこにあるすべての異なるクライアントで電子メールが見栄えがすることを確認するという非常に厄介な仕事をしてくれたジョーダン・イシップに感謝します。そのCSS/HTMLを書くのは面白く見えませんでした。

アップデート：

Roadieはより良いオプションのようです。それを指摘してくれたSethBroに感謝します。

于 2012-04-30T16:18:15.727 に答える
12

（申し訳ありませんが、この答えは…htmlではなく、ですが、ファンHAMLにとっては問題にはならないはずです）HAML

この質問は、 HTMLメールテンプレートを作成するためにインラインSassコンパイルする方法を探しているときに見つけました。csshtml

上記のアドバイスを組み合わせて、head私のhtmlページので次のコードを使用しました。

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

Sassこのコードはasとしてコンパイルされ、cssをタグCSSに挿入します。<style>は、cssで使用されてhtml_safeいる引用符（'および"）または山かっこ（>および）がエスケープされないようにします。<

これpath/to/sass/fileは、スタイルシートリンクタグを作成するときに使用するものと同じです。

<%= stylesheet_link_tag 'path/to/sass/file', :media => 'all' %>
于 2016-02-08T21:51:34.470 に答える
7

Rails.application.assets['asset.js']Railsアセットのコンパイルは本番環境とステージング環境の両方で無効になっているため、ローカル環境でのみ機能します。

Rails.application.assets_manifest.find_sources('asset.js').first.to_s.html_safeRailsアセットパイプラインを使用する場合は、cssをインライン化するために使用する必要があります。

于 2016-09-28T07:06:38.260 に答える
4

SethBroの回答にコメントを追加できません。： #[]の代わりに使用することをお勧めします。#find_assetRails.application.assets["email"].to_s

「アセットは圧縮されません」を再確認してください。それは真実ではない。（rails configで）コンプレッサーを有効にしている場合は圧縮されます：

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

デフォルトでは、これは実稼働環境（config/environments/production.rb）で有効になっていることに注意してください。

于 2013-07-24T22:02:12.197 に答える
4

同じ問題がありましたが、 Premailerの同様の問題に対する@phlegxの回答を使用して解決しました。

環境に安全なソリューションの場合、使用する必要があります

(Rails.application.assets || ::Sprockets::Railtie.build_environment(Rails.application)).find_asset('email.css').to_s

私はそれを私のアプリのヘルパーにパッケージ化しました：

# app/helpers/application_helper.rb
# Returns the contents of the compiled asset (CSS, JS, etc) or an empty string
def asset_body(name)
   (Rails.application.assets || ::Sprockets::Railtie.build_environment(Rails.application)).find_asset(name).to_s
end
于 2018-08-28T14:24:41.650 に答える
3

レール付きのグーグルアンプ互換ページで使用するためにcssをインライン化しようとしていました。vyachkonovalovから次のヘルパーを見つけました。これは、本番環境とローカルで作業している私にとって唯一のものでした。

erbテンプレートに以下を追加します。

<style amp-custom>
  <%= asset_to_string('application.css').html_safe %>
</style>

そして、ヘルパーApplicationHelper。ローカルおよび本番環境で完全に機能します。

module ApplicationHelper
  def asset_to_string(name)
    app = Rails.application
    if Rails.configuration.assets.compile
      app.assets.find_asset(name).to_s
    else
      controller.view_context.render(file: File.join('public/assets', app.assets_manifest.assets[name]))
    end
  end
于 2016-11-16T10:06:56.530 に答える
1

tl; dr（Roadieなし）：

%style(type="text/css")
  = render template: '../assets/stylesheets/email_responsive.css'

CSSをインラインスタイルとして実際に適用するには、roadie-rails （ RoadieのRailsラッパー）をお勧めします。hrefそれはまた、s、srcsなどを絶対化するような他のきちんとした機能を持っています。

email.scssインライン（ ）と非インライン（email_responsive.css）の両方のスタイルシートを組み合わせた使用法で、どちらも次の場所にありapp/assets/stylesheetsます。

-# This will be inlined and applied to HTML elements.
-# Note that you need to include this in your asset config, e.g.:
-# Rails.application.config.assets.precompile += %w(... email.css)
-# (You need to list it as `email.css` even if it's actually `email.scss`.)

= stylesheet_link_tag 'email'


-# E.g. for media queries which can't be inlined - yeah, some iOS devices support them.
-# This will not be inlined and will be included as is (thanks to `data-roadie-ignore`).
-# `template:` marks it as a full template rather than a partial and disables `_` prefix.
-# We need to add the extension (`.css`) since it's non-standard for a view.

%style(type="text/css" data-roadie-ignore)
  = render template: '../assets/stylesheets/email_responsive.css'
于 2015-12-24T22:38:30.580 に答える
0

あなたはこれを使うことができます：

Rails.root.join('public', ActionController::Base.helpers.asset_path("email.css")[1..-1]).read.html_safe
于 2018-08-17T13:39:58.693 に答える