कम आयात सीएसएस और सापेक्ष पथ

Question

मैं अपनी सभी सीएसएस फ़ाइलों को व्यवस्थित और आयात करने के लिए कम उपयोग कर रहा हूं। मैं ट्विटर बूटस्ट्रैप का भी उपयोग कर रहा हूं जिसे मैंने अपनी शैली के अंदर एकीकृत किया। यह नीचे की तरह ठीक काम करता है, हालांकि जब मैं कम फ़ाइल को कम करने के लिए कमक का उपयोग करता हूं और इसे अपने ट्विटर बूटस्ट्रैप सीएसएस के साथ सभी नरक तोड़ देता है। कारण यह है कि मेरा bootstrap.min.css छवियों के लिए "../img" के रूप में एक सापेक्ष पथ है, इसलिए जब मैं इन सभी फ़ाइलों को छोटा करता हूं और अपनी आउटपुट फ़ाइल डंप करता हूं, तो यह अब यह पथ नहीं पाता है।

मुझे इसे ठीक से कैसे ठीक करना चाहिए, मैं अपने सीएसएस में पूर्ण यूआरएल हार्डकोडिंग नहीं करना चाहता हूं?

style.less 
    @import './folder_one/file_one'; 
    @import './folder_one/file_two'; 
    @import './folder_two/file_one'; 
    @import './folder_three/file_one'; 
    // this bootstrap css references images relatively ../img/ 
    @import './bootstrap/bootstrap.min.css'; 

Answer 1

कमांड लाइन उपयोग के लिए दस्तावेज़ देखें। https://github.com/cloudhead/less.js/wiki/Command-Line-Usage। --root-path नामक एक विकल्प है जो मौजूदा यूआरएल को प्रीपेड करेगा ताकि वे आउटपुट सीएसएस फ़ाइल में काम करेंगे।

lessc [option option=parameter ...] <source> [destination] 

lessc -rp=will/be/prepended sourcefile.less path/to/destination 

---

उदाहरण के लिए:

यहाँ, मूल यूआरएल है सीएसएस/src/घोंसले में फ़ाइल के साथ

background-image: url('../../../imgs/bg.png'); 

और यह मैं कमांड लाइन पर क्या करेंगे है । ध्यान दें कि -rp तर्क मूल फ़ाइल स्थान

lessc -rp=src/nest css/src/nest/nesty.less css/nesty.less 

और उत्पादन के लिए उत्पादन निर्देशिका से इंगित करना चाहिए, सीएसएस में फ़ाइल के साथ/

background-image:url('src/nest/../../../imgs/bg.png') 

---

एक --relative-urls विकल्प नहीं है , लेकिन मैं इसे काम करने के लिए नहीं मिल सकता है। मैं बिल्ड स्क्रिप्ट काम कर रहा हूं जो ऊपर वर्णित वर्कअराउंड का उपयोग करता है। Build-o-Matic

यह कैसे मैं पथ [link]

Answer 2

का निर्धारण जब lessc --relative-urls ध्वज का उपयोग चल संभाला है।

lessc --relative-urls 

यह खराब दस्तावेज़ीकरण किया गया है, लेकिन डिफ़ॉल्ट रूप से यह जिसका मतलब है कि सभी @imported फ़ाइलों उनके यूआरएल (जैसे पृष्ठभूमि छवि, फॉन्ट-फेस, आदि) के रूप में वे कर रहे हैं बनाए रखेंगे गलत है। ऐसा इसलिए है क्योंकि कम से कम यह पहले से ही कर रहा था और कई उपयोगकर्ता इसे अपने यूआरएल अकेले छोड़ने की उम्मीद करते हैं।

जब सापेक्ष-यूआरएल ध्वज का उपयोग किया जाता है, तो कम/सीएसएस फ़ाइल आयात किए जाने वाले स्थान के अनुसार कमर सभी यूआरएल को फिर से लिखता है।

उदाहरण

/dir1/style/main.less

// if you don't include (less) lessc will leave bootstrap 
// as an @import at the top of the lessified css file 
@import (less) '../bootstrap/bootstrap.min.css'; 

/dir1/lib/bootstrap/bootstrap.min।सीएसएस

background-image:url("../img/bs-img.gif"); 

परिणाम:

/dir1/style/main.css

background-image:url("../bootstrap/img/bs-img.gif"); 

Answer 3

--relative-urls झंडा उसके इन-ब्राउज़र समकक्ष है।

<script> 
less = { 
    env: "development", 
    relativeUrls: true 
}; 
</script> 
<script src="less.min.js"></script>