2012-04-30 19 views
22

का उपयोग करते समय सीएसएस को इनलाइन करने के बजाय पृष्ठ को एक लिंक के साथ एक स्टाइल टैग शामिल करने के बजाय जहां सीएसएस प्राप्त करना है, जिसे मैं रेलवे stylesheet_link_tag सहायक विधि का उपयोग करके अपने दृश्य में जोड़ सकता हूं, मैं चाहता हूं सीधे पृष्ठ के अंदर सीएसएस इनलाइन।रेल संपत्ति परिसंपत्ति पाइपलाइन

यह वही है मैं अब तक के साथ आया है:

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

लेकिन मैं किसी भी रेलों 'सहायक विधि है जो मुझे किसी संपत्ति का भौतिक पथ देता है नहीं मिल सकता है - physical_asset_path सिर्फ एक डमी विधि द्वारा आविष्कार किया है मुझे।

कोई भी जानता है कि रेल 3.2.x का उपयोग करते समय किसी संपत्ति का भौतिक मार्ग कैसे प्राप्त करें?

क्या स्टाइलशीट प्राप्त करने का एक आसान/बेहतर तरीका है - सामान्य रेल संपत्तियों के पथों के अंदर सीएसएस फ़ाइलों से - इनलाइन?

केस का उपयोग करें: अधिकांश ईमेल क्लाइंट उपयोगकर्ता की पुष्टि के बिना बाहरी स्रोतों (जैसे सीएसएस, छवियों) तक नहीं पहुंचते हैं। तो ईमेल को सही ढंग से प्रदर्शित करने के लिए मुझे ईमेल के HTML के अंदर सीएसएस को एम्बेड करने की आवश्यकता है।

उत्तर

16

उपयोग premailer या premailer-rails3

https://github.com/fphilipe/premailer-rails3 या https://github.com/alexdunae/premailer

जो बेवकूफ पार्टी का कहना है:

हम भी Premailer मणि इस्तेमाल किया स्वचालित रूप से ईमेल में जुड़े हुए स्टाइलशीट इनलाइन करने के लिए देखा गया।

%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 में एक स्टाइलशीट में शामिल हैं: हमारे ईमेल लेआउट की तरह कुछ लग रहा है। प्रीमेलर इसे डाउनलोड करता है, को संसाधित करता है, और HTML में सीएसएस नियम इनलाइन डालता है।

@media नियमों को ईमेल लेआउट में इनलाइन होने की आवश्यकता है, क्योंकि प्रीमेलर उनको अलग सीएसएस फ़ाइल में संभाल नहीं सकता है।

हम प्रिमेलर को रेल 3 में एकीकृत करने के लिए प्रीमेलर-रेल 3 का उपयोग करते हैं। दुर्भाग्यवश, हमें प्रीमेलर और प्रीमेलर-रेल 3 में बग का एक गुच्छा मिला। परियोजनाओं के हमारे कांटे https://github.com/joevandyk/premailer और https://github.com/joevandyk/premailer-rails3 पर हैं। फोर्क्स कुछ एन्कोडिंग बग ठीक करते हैं, प्रीमेलर-रेल 3 द्वारा किए गए कुछ अजीब सीएसएस प्रसंस्करण सामग्री को हटा दें, प्रीमेलर को ईमेल लेआउट में एम्बेड किए गए नियमों और कुछ अन्य चीजों को बाहर नहीं निकालने दें।

हमें सैस रेल में भी एक बग मिला, जहां आप इनलाइन सैस कोड में छवि-यूआरएल एम्बेड नहीं कर सकते हैं। https://github.com/rails/sass-rails/issues/71 प्रीमेलर-रेल 3 एक्शनमेलर में हुक करता है जब ईमेल वास्तव में वितरित होता है, न केवल उत्पन्न होता है। परीक्षण चलाते समय, ईमेल वास्तव में नहीं भेजा गया है, इसलिए प्रीमेलर-रेल 3 हुक परीक्षणों के दौरान नहीं चलते हैं। मैंने यह देखने के लिए समय नहीं बिताया है कि परीक्षण के दौरान चलाने के लिए प्रीमेलर प्रोसेसिंग प्राप्त करना संभव है, लेकिन यह एक अच्छा करना होगा।

इसके अलावा, प्रीमेलर-रेल 3 पर हमारे फोर्क मानते हैं कि आप पर प्रीमेलर चाहते हैं और वास्तव में लिंक की गई सीएसएस फ़ाइलों को डाउनलोड करें। इसे को संसाधित किए गए सीएसएस को डाउनलोड किए बिना रेल 3.1 संपत्ति पाइपलाइन का उपयोग करना संभव होना चाहिए। जॉर्डन आइसिप को बहुत ही विशेष धन्यवाद दिया गया है, जो ने यह सुनिश्चित करने के लिए बहुत परेशान नौकरी की है कि ईमेल में अलग-अलग क्लाइंट में शानदार दिखता है। लिखना कि सीएसएस/एचटीएमएल मजेदार नहीं दिख रहा था।

अद्यतन:

Roadie एक बेहतर विकल्प प्रतीत होता है। इसे इंगित करने के लिए सेठ ब्रो के लिए धन्यवाद।

+0

ग्रेट सामान, धन्यवाद! :) – gucki

+1

आपका कांटा मेरे लिए काम नहीं करता है, इसलिए मैं अपना खुद का कांटा बना देता हूं और दृष्टिकोण भी बदलता हूं: https://github.com/phuongnd08/premailer-rails3/ –

+0

मेरे पास लंबी किस्मत लंबी अवधि है [रोडी] (https://github.com/Mange/roadie)। आखिरी बार मैंने जांच की (कुछ साल पहले), प्रीमेलर-रेल के लिए कुछ quirks थे। –

56

Rails.application.assets.find_asset('email').to_s संकलित संपत्ति को स्ट्रिंग के रूप में वापस कर देगा।

+1

यह * बिल्कुल * है जो मैं खोज रहा था। धन्यवाद! – jpadvo

+1

असुरक्षित रूप से, संपत्ति संपीड़ित नहीं की जाएगी – haimg

+16

यह काम करता है! लेकिन यह '.html_safe' जोड़ना आवश्यक था, इसलिए यह उद्धरण से बच नहीं पाएगा: 'Rails.application.assets.find_asset (' ईमेल ')। to_s.html_safe' – hsgubert

4

सेठ ब्रो के जवाब पर टिप्पणी नहीं जोड़ सकते हैं। #find_asset: Rails.application.assets["email"].to_s के बजाय आप बेहतर #[] का उपयोग करें।

पुन "संपत्ति संपीड़ित नहीं की जाएगी"। यह सच नहीं है। यह संकुचित किया जाएगा यदि आप (config रेल में) कम्प्रेसर सक्षम किया गया है:

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

ध्यान दें, कि डिफ़ॉल्ट रूप से इस उत्पादन वातावरण (config/environments/production.rb) में सक्षम है।

+0

क्या आप कंप्रेसर का उदाहरण दे सकते हैं? मैं इसे संपीड़ित नहीं कर सकता। –

+0

उत्तर देने के लिए एक उदाहरण जोड़ा गया। – ixti

+0

उत्पादन में काम नहीं लग रहा है। आसपास कोई काम? संपत्ति वहां शून्य लगती है। –

1

tl; डॉ (रोडी के बिना):

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

वास्तव में इनलाइन शैलियों के रूप में सीएसएस लागू करने के लिए, मैं roadie-rails की सलाह देते हैं (जो Roadie के लिए एक रेल आवरण है)। यह भी absolutizing href है, जैसे अन्य स्वच्छ सुविधाओं की है src रों आदि

एक उपयोग दोनों inlined (email.scss) और गैर-inlined (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' 
7

(क्षमा करें यह जवाब में html, नहीं HAML है ... लेकिन यह है कि

HAML के प्रशंसकों के लिए एक समस्या) मैं इस सवाल का जब लो पाया नहीं होना चाहिए एचटीएमएल ईमेल टेम्पलेट्स बनाने के लिए html में के रूप में संकलित Sass को इनलाइन करने के तरीके के लिए ठीक है।

ऊपर सलाह के संयोजन, मैं अपने html पेज के head में निम्न कोड का प्रयोग किया:

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

इस कोड SassCSS के रूप में संकलित और फिर एक <style> टैग में सीएसएस सम्मिलित करता है। html_safe यह सुनिश्चित करता है कि कोई भी उद्धरण (' और ") या कोण ब्रैकेट (> और <) सीएसएस में उपयोग नहीं किया जाता है।के रूप में रेल संपत्ति संकलन दोनों उत्पादन और स्टेजिंग वातावरण में अक्षम है,

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

Rails.application.assets['asset.js'] केवल स्थानीय वातावरण में काम करेंगे:

path/to/sass/file ही है जैसा कि आप जब एक स्टाइलशीट लिंक टैग बनाने का प्रयोग करेंगे।

Rails.application.assets_manifest.find_sources('asset.js').first.to_s.html_safe रेल संपत्ति परिसंपत्ति पाइपलाइन का उपयोग करते समय सीएसएस को इनलाइन करने के लिए उपयोग किया जाना चाहिए।

+2

यह समाधान मेरे लिए उत्पादन पर काम किया। –

1

मैं रेल के साथ Google amp संगत पृष्ठों में उपयोग के लिए सीएसएस को रेखांकित करने की कोशिश कर रहा था। मुझे vyachkonovalov से निम्नलिखित सहायक मिला जो उत्पादन और स्थानीय रूप से काम करने के लिए एकमात्र चीज थी।

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

और सहायक ApplicationHelper रहे हैं:

erb टेम्पलेट के लिए निम्न जोड़ें। यह पूरी तरह से स्थानीय रूप से और उत्पादन में काम करता है।

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 
संबंधित मुद्दे