Как встраивать css при использовании конвейера ресурсов рельсов

Ответ 1

Использовать предварительный или предварительный рельсы3

https://github.com/fphilipe/premailer-rails3 или https://github.com/alexdunae/premailer

Партия Джо Nerd говорит:

Мы также использовали драгоценный камень Premailer для автоматического встраивания связанного stylesheet в сообщениях электронной почты. Наш макет электронной почты выглядит примерно так:

%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 правила css.

Правила @media должны быть встроены в рассылку электронной почты, поскольку Претендент не может обрабатывать те, которые находятся в отдельном файле css.

Мы используем premailer-rails3 для интеграции Premailer в Rails 3. К сожалению, мы обнаружили кучу ошибок в premailer и premailer-rails3. Наши вилки проектов https://github.com/joevandyk/premailer и https://github.com/joevandyk/premailer-rails3. Вилки фиксируют некоторые кодирования ошибок, удалить некоторые странные css обработки материала, сделанные premailer-rails3, разрешить превалирующему, чтобы не правила в макетах электронной почты и некоторые другие вещи.

Мы также обнаружили ошибку в sass-rails, где вы не можете вставлять графические URL-адреса в встроенный код sass. См. https://github.com/rails/sass-rails/issues/71Premailer-rails3 перехватывает ActionMailer, когда на самом деле электронная почта доставлен, не только сгенерирован. При запуске тестов электронная почта не на самом деле отправлено, поэтому крючки premailer-rails3 не запускаются во время тесты. Я не потратил время, чтобы узнать, можно ли предварительная обработка для запуска во время тестов, но это было бы неплохо предмет, чтобы сделать.

Кроме того, наши вилки на premailer-rails3 предполагают, что вы хотите, чтобы выходить и загружать связанные файлы CSS. Должен быть можно использовать конвейер ресурсов Rails 3.1 для получения обработанного css без его загрузки. Очень благодарна Иорданию Исипу, который сделал супер раздражающую работу, чтобы убедиться, что электронные письма отлично смотрятся во всех разные клиенты там. Написание CSS/HTML не выглядело весело.

Update:

Roadie представляется лучшим вариантом. Спасибо Seth Bro за указание на это.

Ответ 2

Rails.application.assets.find_asset('email').to_s возвращает скомпилированный актив в виде строки.

Ответ 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' %>

Ответ 4

Rails.application.assets['asset.js'] будет работать только в локальной среде, поскольку компиляция ресурсов rails отключается как в рабочей, так и в промежуточной среде.

Rails.application.assets_manifest.find_sources('asset.js').first.to_s.html_safe следует использовать для встроенного css при использовании конвейера ресурсов rails.

Ответ 5

Невозможно добавить комментарий к Seth Bro. Лучше использовать #[] вместо #find_asset: Rails.application.assets["email"].to_s.

Re "актив не будет сжат". Это неправда. Он будет сжат, если вы включили компрессоры (в конфигурации rails):

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

Обратите внимание, что по умолчанию это разрешено в рабочей среде (config/environments/production.rb).

Ответ 6

tl; dr (без Roadie):

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

Для фактического применения CSS как встроенных стилей я рекомендую roadie-rails (это оболочка Rails для Roadie). Он также имеет другие опрятные функции, такие как абсолютизация href s, src и т.д.

Использование, объединяющее как строковые (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 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 non-standard for a view.

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

Ответ 7

Я пытался встроить css для использования на совместимых с Google страницах с рельсами. Я нашел следующий помощник 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