रेल 4 और कंपास, मेरे एसएएस फाइलों में केवल एक बार आयात कैसे करें? - सीएसएस, रूबी-ऑन-रेल -4, एसएएस, कंपास-सास, कंपास

मेरे पास मेरी सभी सीएसएस फाइलों के साथ "स्टाइलशीट / एप्लिकेशन / इंडेक्स। एससीएससीएस" के साथ एक रेल 4 परियोजना है:

 /*
*= require jquery.ui.all
*= require_tree ../shared
*= require_tree ../design
*= require_tree ../layout
*= require_self
*= require_tree .
*/

रेल सभी सीएसएस को केवल एक में संकलित करती है, न्यूनतम (उत्पादों में)।

मुझे आयात करने की आवश्यकता है @import "shared/header" कई फाइलों में।

उदाहरण: "स्टाइलशीट / लेआउट / main.css.scss" में

@import "shared/header";

.header
{
@extend .header_common_overview;
[...]
}

लेकिन मैं @import "shared/header" अन्य फ़ाइलों में भी। परिणाम है :

जब रेल केवल एक फ़ाइल में संकलित होती है, तो कई बार समान नियम ".header_common_overview" होते हैं, क्योंकि मैं इसे विभिन्न फ़ाइलों में आयात करता हूं।

मैंने "इंपोर्ट" निर्देश को सीधे index.css.scss में डालने का प्रयास किया, लेकिन यह "t" कार्य करता है।

तो मैं केवल एक बार किसी फ़ाइल को कैसे आयात कर सकता हूं, और अन्य सभी फ़ाइलों में सामग्री को कॉल करने के लिए कैसे योग्य हो सकता हूं?

उत्तर:

उत्तर № 1 के लिए 1

सबसे पहले, उपयोग नहीं करते हैं require_tree . आप अपनी सीएसएस फ़ाइलों के शामिल आदेश पर नियंत्रण खो देते हैं, संभावित रूप से कैस्केडिंग मुद्दों के लिए अग्रणी - शैलियों को अधिलेखित किया जा रहा है जो वास्तव में नहीं होना चाहिए।

मैं "sprockets से बचने के लिए सीखा है" require मुख्य SASS फ़ाइलों में आपके द्वारा वर्णित कारणों के समान लाइनें।

• यह दोहराव को जन्म दे सकता है, विशेषकर उपयोग करते समय =require_tree सभी जगह
• चर / मिश्रण / आदि ... को sprockets के माध्यम से शामिल नहीं किया जा सकता है (हालांकि मुझे इस बारे में गलत साबित होना पसंद है

आपके में index.css.scss आप बस डालने पर विचार कर सकते हैं

@import "vendor";
@import "shared";
@import "design";
@import "layout";

// Your main styling here.

@import "another_file";

इन @import लाइनें अन्य sass फ़ाइलों के अनुरूप हैं। shared.css.scss उदाहरण के लिए लग सकता है

/*
*=require ./shared/header
*/

विचार करना है

1. अपनी संपत्ति में स्वच्छ पृथक्करण / संगठन शामिल करें
2. स्पष्ट रूप से प्रत्येक परिसंपत्ति को शामिल करें ताकि आप शामिल आदेश पर पूर्ण नियंत्रण बनाए रखें
3. SASS का प्रयोग करें @importSprockets के बजाय =require चर, मिश्रण, आदि रखने का निर्देश ... एक उपलब्ध फ़ाइल में मौजूद है।

---

जवाब के लिए 0 № 2

मेरा समाधान है: all.css.scss बनाएं:

/*
*= require jquery.ui.all => static, don"t need import
*/
@import "included/**/*"; //all files included (at first time)
@import "all/**/*"; //all real css files which requires included file (in second times)

आदेश का सम्मान और नियंत्रण किया जाता है।

शामिल फ़ाइलें केवल एक बार मौजूद है

शामिल फाइलें प्रत्येक वास्तविक सीएसएस फाइलों में साझा की जाती हैं।

मदद के लिए thx

---