ruby on rails - learn - Cómo integrar css cuando se utiliza el canal de activos de Rails

ruby on rails tutorial español

Question

En lugar de que la página incluya una etiqueta de estilo con un enlace desde el cual obtener el css, que podría agregar a mi vista usando el método de ayuda de stylesheet_link_tag rails, quiero tener el css en línea directamente dentro de la página.

Esto es lo que se me ocurrió hasta ahora:

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

Pero no puedo encontrar ningún método de ayuda de los rieles que me dé la ruta física de un activo: physical_asset_path es solo un método ficticio inventado por mí.

¿Alguien sabe cómo obtener la ruta física de un activo al usar rieles 3.2.x?

¿Hay una forma más fácil / mejor de obtener hojas de estilo - desde archivos css dentro de las rutas de activos de common rails - en línea?

Caso de uso: la mayoría de los clientes de correo electrónico no acceden a fuentes externas (como css, imágenes) sin la confirmación del usuario. Entonces, para que los correos electrónicos se muestren correctamente, necesito incrustar el CSS dentro del HTML de los correos electrónicos.

Answer 1

Intentaba incluir CSS en línea en páginas compatibles con Google Amp con rieles. Encontré el siguiente asistente de vyachkonovalov que era lo único para mí que trabajaba en producción y localmente.

Agregue lo siguiente a la plantilla erb :

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

Y el ayudante a ApplicationHelper . Funciona perfectamente a nivel local y en producción.

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

Answer 2

No se puede agregar comentario a la respuesta de Seth Bro. Mejor usa #[] lugar de #find_asset : Rails.application.assets["email"].to_s .

Re "activo no será comprimido". No es verdad. Se comprimirá si tiene los compresores habilitados (en la configuración de rieles):

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

Tenga en cuenta que, de forma predeterminada, esto está habilitado en el entorno de producción ( config/environments/production.rb ).

Answer 3

Puedes usar esto:

Rails.root.join(''public'', ActionController::Base.helpers.asset_path("email.css")[1..-1]).read.html_safe

Answer 4

Tuvo el mismo problema, lo resolvió con la respuesta de @ phlegx a un problema similar en Premailer.

Para una solución segura para el medio ambiente que necesita utilizar

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

Lo he empaquetado en un ayudante en mi aplicación:

# 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

Answer 5

Utilice premailer o premailer-rails3

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

Joe''s Nerd Party dice:

También utilizamos la gema Premailer para incluir automáticamente la hoja de estilo vinculada en las vistas de correo electrónico. Nuestro diseño de correo electrónico se ve algo así como:

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

Incluimos una hoja de estilo en el HTML. Premailer lo descarga, lo procesa e inserta las reglas de css en línea en el HTML.

Las reglas de @media deben estar en línea en el diseño del correo electrónico, ya que Premailer aún no puede manejar las que están en un archivo css separado.

Utilizamos premailer-rails3 para integrar Premailer en Rails 3. Desafortunadamente, encontramos varios errores en premailer y premailer-rails3. Nuestras bifurcaciones de los proyectos se encuentran en https://github.com/joevandyk/premailer y https://github.com/joevandyk/premailer-rails3 . Las bifurcaciones corrigen algunos errores de codificación, eliminan algunas cosas extrañas del procesamiento de css realizadas por premailer-rails3, permiten que premailer no elimine las reglas incrustadas en los diseños de correo electrónico, y algunas otras cosas.

También encontramos un error en sass-rails, donde no puedes incrustar url de imágenes en el código de Sass en línea. Consulte https://github.com/rails/sass-rails/issues/71 Premailer-rails3 engancha en ActionMailer cuando el correo electrónico se entrega, no solo se genera. Cuando se ejecutan las pruebas, el correo electrónico no se envía realmente, por lo que los enlaces premailer-rails3 no se ejecutan durante las pruebas. No he pasado el tiempo para ver si es posible hacer que el procesamiento del premailer se ejecute durante las pruebas, pero sería bueno hacerlo.

Además, nuestras bifurcaciones en premailer-rails3 asumen que usted desea que premailer salga y descargue los archivos CSS vinculados. Debería ser posible utilizar el flujo de activos de Rails 3.1 para obtener el css procesado sin descargarlo. Un agradecimiento muy especial para Jordan Isip, quien hizo el trabajo muy molesto de asegurarse de que los correos electrónicos se vean bien en todos los diferentes clientes que existen. Escribir que CSS / HTML no se veía divertido.

Actualizar:

Roadie parece ser una mejor opción. Gracias a Seth Bro por señalarlo.

Answer 6

tl; dr (sin roadie):

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

Para aplicar realmente el CSS como estilos en línea, recomiendo roadie-rails (que es un contenedor de Rails para Roadie ). También tiene otras características interesantes como absolutizar href s, src s, etc.

Un uso que combina las hojas de estilo en línea ( email.scss ) y no en línea ( email_responsive.css ), ambas residen en app/assets/stylesheets 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''

Answer 7

Rails.application.assets.find_asset(''email'').to_s devolverá el activo compilado como una cadena.

Answer 8

Rails.application.assets[''asset.js''] funcionará solo en el entorno local, ya que la compilación de activos de Rails está deshabilitada tanto en el entorno de producción como en el de transición.

Rails.application.assets_manifest.find_sources(''asset.js'').first.to_s.html_safe debe usar para Rails.application.assets_manifest.find_sources(''asset.js'').first.to_s.html_safe css cuando se usa el canal de activos de rails.

Answer 9

(Lo siento, esta respuesta está en html , no en HAML ... pero eso no debería ser un problema para los fanáticos de HAML )

Encontré esta pregunta cuando buscaba una manera de integrar Sass compilado como css en html para crear plantillas de correo electrónico html.

Combinando el consejo anterior, utilicé el siguiente código en el head de mi página html :

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

Este código compila Sass como CSS y luego inserta el css en una etiqueta <style> . El html_safe garantiza que no se html_safe las comillas ( '' y " ) o los corchetes angulares ( > y < ) utilizados en el css.

La path/to/sass/file es la misma que usaría al crear una etiqueta de enlace de hoja de estilo:

<%= stylesheet_link_tag ''path/to/sass/file'', :media => ''all'' %>