শর্তসাপেক্ষে নির্দিষ্ট সিএসএস ব্যবহার করতে রেলগুলি ৩.১ সম্পত্তির পাইপলাইন ব্যবহার করা

Question

আমি রেলগুলি 3.1.rc5 ব্যবহার করে আমার প্রথম একক রেল অ্যাপ তৈরির প্রক্রিয়ায় আছি। আমার সমস্যাটি হ'ল আমি চাই যে আমার সাইটটি বিভিন্ন সিএসএস ফাইলকে শর্তাধীনভাবে রেন্ডার করতে। আমি ব্লুপ্রিন্ট সিএসএস ব্যবহার করছি এবং আমি স্প্রোকেট / রেলগুলি screen.cssবেশিরভাগ সময় রেন্ডার করার চেষ্টা করছি , print.cssকেবল যখন মুদ্রণ করা হয়, এবং ie.cssকেবল তখনই ইন্টারনেট এক্সপ্লোরার থেকে সাইট অ্যাক্সেস করা হয়।

দুর্ভাগ্যক্রমে, ম্যানিফেস্টে ডিফল্ট *= require_treeকমান্ডটি ডিরেক্টরিতে application.cssসমস্ত কিছু অন্তর্ভুক্ত করে assets/stylesheetsএবং ফলস্বরূপ একটি অপ্রীতিকর সিএসএস বিড়বিড় করে। আমার বর্তমান কাজটি হ'ল এক প্রকারের জোর-বলের পদ্ধতি যেখানে আমি পৃথকভাবে সমস্ত কিছু নির্দিষ্ট করি:

অ্যাপ্লিকেশন। সিএসএসে:

*= require_self
*= require home.css
...
*= require blueprint/screen.css

আমার স্টাইলশিটগুলিতে আংশিক (এইচএমএল):

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

এটি কাজ করে তবে এটি বিশেষ সুন্দর নয়। এমনকি এ পর্যন্ত পেতে আমি কয়েক ঘন্টা অনুসন্ধান করেছি কিন্তু আমি আশা করছি যে এটি করার সহজ কিছু উপায় আছে যা আমি সবেমাত্র মিস করেছি। আমি যদি নির্বাচিতভাবে কিছু ডিরেক্টরি (সাব-ডিরেক্টরি অন্তর্ভুক্ত না করে) রেন্ডার করতে পারি তবে এটি পুরো প্রক্রিয়াটিকে অনেক কম অনড় করে তুলবে।

ধন্যবাদ!

Answer 1

আমি এখনও সম্পদ পাইপলাইন ব্যবহার করে কিন্তু স্টাইলশিটগুলি গোষ্ঠীযুক্ত করে এটিকে কম অনমনীয় এবং ভবিষ্যতের প্রমাণ তৈরি করার একটি উপায় খুঁজে পেয়েছি। এটি আপনার সমাধানের চেয়ে খুব সহজ নয়, তবে এই সমাধানটি আপনাকে পুনরায় পুরো কাঠামোটি পুনরায় সম্পাদনা না করে স্বয়ংক্রিয়ভাবে নতুন স্টাইলশিট যুক্ত করতে দেয়।

আপনি যা করতে চান তা হ'ল জিনিসগুলি ভেঙে ফেলার জন্য পৃথক ম্যানিফেস্ট ফাইল ব্যবহার করুন। প্রথমে আপনাকে আপনার app/assets/stylesheetsফোল্ডারটি পুনরায় সংগঠিত করতে হবে :

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

তারপরে আপনি তিনটি ম্যানিফেস্ট ফাইল সম্পাদনা করুন:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

এরপরে আপনি আপনার অ্যাপ্লিকেশন বিন্যাস ফাইলটি আপডেট করুন:

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

শেষ অবধি, আপনার কনফিগারেশন / পরিবেশ / উত্পাদনে.আরবিতে এই নতুন প্রকাশিত ফাইলগুলি অন্তর্ভুক্ত করতে ভুলবেন না:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

হালনাগাদ:

সর্বাধিক নির্দেশিত হিসাবে, আপনি যদি এই কাঠামোটি অনুসরণ করেন তবে আপনাকে চিত্রের রেফারেন্সগুলি সম্পর্কে সচেতন থাকতে হবে। আপনার কয়েকটি পছন্দ আছে:

1. একই প্যাটার্ন অনুসরণ করতে চিত্রগুলি সরান
   • মনে রাখবেন যে চিত্রগুলি সমস্ত ভাগ করা না থাকলে এটি কেবলমাত্র কাজ করে
   • আমি আশা করি এটি বেশিরভাগের জন্য একটি অ-স্টার্টার হবে কারণ এটি জিনিসগুলিকে খুব জটিল করে তোলে
2. চিত্রের পথটি যোগ্য করুন:
   • background: url('/assets/image.png');
3. SASS সহায়তা ব্যবহার করুন:
   • background: image-url('image.png');

Comments

যদিও এটি ফাইলগুলির একটি দুর্দান্ত সংগঠন, আমি বিশ্বাস করি এটি এখনও প্রয়োজনীয় সমস্যাটি একইভাবে সমাধান করে যা প্রশ্ন নিজেই করে।

— সেম্পেরোস

@ সিম্পেরস, আপনি সঠিক যে সমাধানটির আকৃতি মূলত একই তবে আমার প্রস্তাবটি এখনও আমাদের স্টাইলশিটের সম্পূর্ণতার জন্য সম্পদ পাইপলাইন ব্যবহার করতে দেয় to আমি নিশ্চিত নই যে এটি আলাদা স্টাইলশীটে না থাকলে বেছে বেছে শৈলীর কিছু অংশ অন্তর্ভুক্ত করার অন্য উপায় আছে কিনা। কমপক্ষে এইভাবে আমরা কেবলমাত্র কয়েকটি মুখ্য সিএসএস ফাইল সংকলন করি।

— গ্যাস্ট্রো

রেলসেট সম্পদ পাইপলাইন গাইডে এর মতো কিছু আসলে ভাল হবে। ধন্যবাদ

— বাশার আবদুল্লাহ

যদিও এখানে একটি গ্যাচা রয়েছে: আপনি যদি এই কাঠামোটি অনুসরণ করেন এবং সাধারণ .cssফাইলগুলি ব্যবহার করেন তবে আপনার সমস্ত চিত্রগুলি নষ্ট হয়ে যাবে। যেমন background: url('image.png')পথে অনুবাদ করা হবে /assets/all/image.png(মন সব পাথ)। এর পরিবর্তে এই কাজ করে: background: url('/assets/image.png)। এর যদি আরও সহজ সমাধান হয় তবে এটি পোস্ট করুন। SASS ব্যবহার করা ছাড়াও এমন সহায়িকা পদ্ধতি রয়েছে যা সম্ভবত সঠিকভাবে পথটি সমাধান করে।

— সর্বাধিক

@ এক্সিআর, হ্যাঁ যে কোনও স্টাইলশিট বা জেএস ফাইল / ম্যানিফেষ্ট যা স্ট্যান্ডার্ড প্যাটার্ন অনুসরণ করে না তাদের প্রাকম্পম্পাইল অ্যারেতে যুক্ত করা প্রয়োজন (দেখুন: গাইডস.আরবায়ারালইলস.অ্যাসেট_পাইপলাইন। Html# precompiling- assets )

— গ্যাস্ট্রো

Answer 2

আজ এই সমস্যা জুড়ে।

সমস্ত IE নির্দিষ্ট স্টাইলশিটকে lib / সম্পদ / স্টাইলশিটগুলিতে স্থাপন এবং আইই এর সংস্করণ অনুসারে একটি ম্যানিফেস্ট ফাইল তৈরি শেষ nded তারপরে অ্যাপ্লিকেশন.আরবিতে এগুলি পূর্বের বিষয়গুলির তালিকায় যুক্ত করুন:

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

এবং আপনার বিন্যাসে শর্তসাপেক্ষে manifest ম্যানিফেস্ট ফাইলগুলি অন্তর্ভুক্ত করুন এবং আপনি যেতে ভাল!

Answer 3

এটি করার জন্য বেশ ঝরঝরে উপায়। আমি এইচটিএমএল বা মডার্নজারে শর্তযুক্ত ক্লাস ব্যবহার করি। কি করে তার ভাল উপস্থাপনের জন্য এই নিবন্ধটি দেখুন। modernizr-বনাম-শর্তাধীন-শ্রেণীর-অন-এইচটিএমএল