Comment css lors de l'utilisation de rails asset pipeline

Au lieu d'avoir la page d'inclure une balise style avec un lien où trouver le css de qui je pourrais ajouter à mon point de vue à l'aide de rails stylesheet_link_tag méthode d'assistance, je veux avoir le css inline directement à l'intérieur de la page.

C'est ce que j'ai trouvé jusqu'à présent:

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

Mais je ne trouve pas de rails' aide de la méthode qui me donne le chemin d'accès physique d'un actif - physical_asset_path est juste un mannequin méthode inventée par moi.

Quelqu'un sait comment obtenir le chemin d'accès physique d'un actif lors de l'utilisation de rails 3.2.x?

Est-il un moyen plus facile/mieux pour obtenir les feuilles de style - à partir de fichiers css à l'intérieur de la commune rails actifs chemins - inline?

Cas d'utilisation: la plupart des clients de messagerie n'ont pas accès à des sources externes (comme css, images) sans confirmation de l'utilisateur. Afin de recevoir les emails affichés correctement j'ai besoin d'intégrer le CSS à l'intérieur de la e-mails HTML.

InformationsquelleAutor gucki | 2012-04-30

asset-pipeline ruby-on-rails

16

Utilisation premailer ou premailer-rails3

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

Joe Nerd Partie dire:

Nous avons également utilisé la Premailer gem automatiquement inline liés
la feuille de style dans l'e-mail de vues. Notre e-mail de mise en page ressemble à quelque chose comme:
```
%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.
```
Nous inclure une feuille de style dans le HTML. Premailer téléchargements, les processus
c', et insère les règles css inline dans le code HTML.

Le @media règles doivent être en ligne dans l'e-mail de mise en page, depuis
Premailer ne peut pas gérer ces cours dans un autre fichier css encore.

Nous utilisons premailer-rails3 à intégrer Premailer dans Rails 3.
Malheureusement, nous avons trouvé un tas de bugs dans premailer et
premailer-rails3. Nos fourches, les projets sont à
https://github.com/joevandyk/premailer et
https://github.com/joevandyk/premailer-rails3. La fourche de résoudre certains
l'encodage de bugs, de supprimer certaines bizarre css traitement des trucs fait par
premailer-rails3, permettre premailer de ne pas sortir la bande intégré
les règles dans l'e-mail les mises en page, et quelques autres choses.

Nous avons également trouvé un bug dans le sass-rails, où vous ne pouvez pas incorporer une image-url
inline sass code. Voir https://github.com/rails/sass-rails/issues/71
Premailer-rails3 crochets en ActionMailer lorsque le courrier électronique fait d'être
livré, pas seulement généré. Lors de l'exécution de tests, e-mail n'est pas
effectivement envoyé, afin que la premailer-rails3 crochets de ne pas avoir couru pendant
les tests. Je n'ai pas passé le temps de voir si il est possible d'obtenir la
premailer traitement à exécuter pendant les essais, mais ce serait une belle
chose à faire.

Aussi, nos fourches sur premailer-rails3 supposons que vous voulez premailer à
sortir et de télécharger les fichiers CSS lié. Il devrait être
possible d'utiliser les Rails 3.1 asset pipeline pour obtenir les traités css
sans le télécharger. Un merci très spécial va à la Jordanie Psie qui
ne le super ennuyeux travail de s'assurer que les e-mails de l'allure dans tous les
les différents clients là-bas. L'écriture CSS/HTML n'a pas l'air
amusant.

Mise à jour:

Roadie semble être une meilleure option. Grâce à Seth Bro pour le pointant à l'extérieur.
- Votre fourche ne fonctionne pas pour moi, donc j'ai créer mon propre fourchette et aussi changer l'approche: github.com/phuongnd08/premailer-rails3
- J'ai eu la chance de mieux à long terme avec Technicien. Dernière, j'ai vérifié (il y a quelques années), il y avait quelques bizarreries de premailer-rails.
- Roadie semble être une solution propre.
InformationsquelleAutor Hitham S. AlQadheeb
60

Rails.application.assets.find_asset('email').to_s sera de retour la compilation des actifs comme une chaîne de caractères.
- C'est exactement ce que je cherchais. Merci!!!!
- Unforunately, l'actif ne sera pas compressé
- Qui fonctionne! mais il était nécessaire d'ajouter un .html_safe afin de ne pas échapper les guillemets: Rails.application.assets.find_asset('email').to_s.html_safe
- C'est le chaînon manquant en utilisant %style{type:"text/css"}= Rails.application.assets.find_asset('email_stylesheet').to_s dans la section head de votre e-mail.html.haml fichier avec l'premailer-gem rails, le css est trouvé, compilé et inline - yay! de travail des e-mails html!
- Si vous utilisez roadie avec cette technique, vous aurez toujours besoin de dire Roadie de l'ignorer: %style{:type => "text/css", :'data-roadie-ignore' => true} = Rails.application.assets['email'].to_s.html_safe
- Malheureusement, Rails.application.l'actif est nul en production...
- En production: File.read("#{Rails.root}/public/assets/#{Rails.application.assets_manifest.files.collect{|k, v| k if v['logical_path'] == 'email.css' }.compact.first}").html_safe
InformationsquelleAutor Seth Bro
9

(Désolé de cette réponse est en html, pas HAML... mais ça ne devrait pas être un problème pour HAML fans)

J'ai trouvé cette question lors de la recherche d'un moyen de inline Sass compilé comme css en html pour la création de modèles d'e-mail html.

Combinant les conseils ci-dessus, j'ai utilisé le code suivant dans la head de mon html page:
```
<style type="text/css">
  <%= Rails.application.assets['path/to/sass/file'].to_s.html_safe %>
</style>
```
Ce code compile Sass comme CSS et insère ensuite le css dans un <style> tag. Le html_safe s'assure que toutes les citations (' et ") ou des crochets (> et <) utilisé dans les css ne sont pas échappé.

La path/to/sass/file est le même que vous utilisez lors de la création d'une feuille de style de la balise lien:
```
<%= stylesheet_link_tag 'path/to/sass/file', :media => 'all' %>
```
InformationsquelleAutor Beau Smith
6

Rails.application.assets['asset.js'] ne fonctionnera que dans l'environnement local, comme les rails de l'actif de la compilation est désactivé à la fois la production et l'environnement de test.

Rails.application.assets_manifest.find_sources('asset.js').first.to_s.html_safe doit être utilisé pour du css lors de l'utilisation de rails asset pipeline.

InformationsquelleAutor ThisIzKp
4

Ne pouvez pas ajouter de commentaire à Seth Bro réponse. Vous feriez mieux d'utiliser #[] au lieu de #find_asset:
Rails.application.assets["email"].to_s.

Re "actif ne sera pas compressé". Ce n'est pas vrai. Il sera compressé si vous avez des compresseurs activé (dans les rails de config):
```
Rails.application.configure do
  # ...
  config.assets.css_compressor = :sass
  config.assets.js_compressor  = :uglify
end
```
Avis, que par défaut, cette option est activée dans l'environnement de production (config/environments/production.rb).
- Pouvez-vous donner un exemple des compresseurs dont vous parlez? Je n'arrive pas à compresser.
- Ajout d'un exemple de réponse.
- Ne semble pas fonctionner dans la production. Toutes les contourner? actifs semble être nul n'.
InformationsquelleAutor ixti

J'essayais de css pour utiliser dans google amp pages compatible avec les rails. J'ai trouvé le suivant helper de vyachkonovalov qui était la seule chose pour moi de travailler dans la production et localement.

Ajouter le texte suivant à la erb modèle:

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

Et l'aide à ApplicationHelper. Il fonctionne parfaitement en local et dans la production.

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

InformationsquelleAutor svnm

tl;dr (sans Roadie):

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

Pour appliquer le CSS styles en ligne, je vous recommande de roadie-rails (qui est un des Rails de wrapper pour Roadie). Il a également d'autres fonctionnalités intéressantes comme l'absolutisation de hrefs, srcs etc.

De l'utilisation de la combinaison de deux inline (email.scss) et non inline (email_responsive.css) les feuilles de style, résidant dans 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'

InformationsquelleAutor Halil Özgür

Eu le même problème, résolu en utilisant @phlegx réponse à un problème similaire dans Premailer.

Pour un environnement sécuritaire solution dont vous avez besoin pour utiliser

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

Je l'ai emballé dans un helper dans mon application:

# 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

InformationsquelleAutor Goulven

Vous pouvez utiliser ceci:

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

InformationsquelleAutor Marlon Henry Schweigert

Vous devez vous connecter pour publier un commentaire.