解決 Mail 的 CSS 樣式無法被支援

Posted on In , Views: Disqus:

Rails 內建的 action mailer 可以用來寄發信件，搭配 action job 非同步處理寄送信件是常常使用的搭配。在寄發信件時，信件內容寫在 html.erb 裡代表，我們可以讓信件內容不只是純文字，而是可以將 CSS 套入，使信件內容的樣貌更豐富。

但由於 email 閱讀軟體的版本非常老舊，甚至比瀏覽器還舊很多，所以在使用 CSS 時，可能會無法被 email 閱讀軟體支援，導致畫面沒有 CSS 的效果。

解決這個問題的方法有：

  1. 撰寫 inline-style css

  2. 套件：
    1). gem 'premailer-rails'

    2). 在 config/initializers 建立 premailer_rails.rb 並在檔案裡將Premailer::Rails.config.merge!(preserve_styles: true, remove_ids: true) 設定寫入

    3). 把 mail 的 css 寫在 assets/stylesheets 裡

    4). 在 assets/config/manifest.js 裡，把 stylesheets 裡的 mail css 檔加進來：*//= link mail/mailer.css (assets/stylesheets/mail/mailer.css)*

    5). 在 mail 的 html.erb 檔裡，把 stylesheet_link_tag 加到 head tag 裡: 

    1
    2
    3
    4
    5
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <%= stylesheet_link_tag 'mail/mailer' %>
    </head>

    如此一來，便可以在 assets 的 css 檔裡，幫信件加上 css 樣式，且可被 email 的閱讀軟體支援。