Visual Studio 2017 में कम / sass फ़ाइलों को कैसे संकलित करें


85

VS <= 2015 में हम WebEssentials एक्सटेंशन का उपयोग कर सकते हैं जो हमारे लिए कम / sass फ़ाइलों को संकलित करने के लिए ध्यान रखता है, लेकिन वर्तमान में यह VS 2017 का समर्थन नहीं करता है। क्या आप ऐसे ही एक्सटेंशन के बारे में जानते हैं जो बिल्ड पर कम / sass को संकलित कर सकते हैं?

जवाबों:


104

WebEssentials को कई एक्सटेंशन में विभाजित किया जा रहा है। मेरा मानना ​​है कि आप जो कार्यक्षमता चाहते हैं वह अब वेब कंपाइलर एक्सटेंशन में है।

यदि आप इसे बिना एक्सटेंशन के करना चाहते हैं, तो आप एक काम धावक की तरह उपयोग कर सकते हैं। वीएस में गुल कार्यों को कैसे एकीकृत किया जाए, इसके बारे में यहां देखें ।


मैं वेब कंपाइलर का उपयोग वी.एस. 2019 में एक विस्तार के रूप में कर रहा हूं ताकि कुछ बहुत पुरानी बेकार फाइलों को संकलित करने में मदद मिल सके।
क्लेविस

1
नोट: वेब कंपाइलर को छोड़ दिया जाए, तो अंतिम अद्यतन 5 साल पहले था। कुछ अधूरे मुद्दे हैं, लेकिन थोड़े काम करते हैं।
एलेक्स

वेब कंपाइलर ने मेरे लिए वीएस 2019 में काम किया, लेकिन यह बॉक्स के बाहर ऑटो-रीसायकल नहीं होगा। कंपाइलेंकफिग.जसन फ़ाइल को बनाने के लिए आपको एक बार मैन्युअल रूप से ( इस उत्तर को देखें ) संकलन चलाना होगा । उसके बाद, यह फ़ाइलों को ऑटो-री-कंपाइल करेगा।
निज़ान

49

अद्यतन - कृपया इस पृष्ठ को पढ़े, जैसा कि मैंने एक अतिरिक्त उत्तर दिया है (यह मेरे लिए कोई बड़ा विषय नहीं है)।

उन लोगों के लिए, जो मेरी तरह, जो गल्प या ग्रन्ट या श्रीक या वेल को नहीं जानते हैं, और नहीं चाहते हैं, आप विजुअल स्टूडियो 2017 को अपनी SCSS फ़ाइलों को स्वचालित रूप से संकलित करने के लिए प्राप्त कर सकते हैं, जैसे कि यह Visual Studio 2015 में उपयोग किया गया था। नीचे दिए गए चरणों ने मेरे लिए काम किया।

पहले वेब कंपाइलर के लिए किसी भी पुराने एक्सटेंशन / नुगेट पैकेज की स्थापना रद्द करें (मुझे नहीं पता कि यह आवश्यक है या नहीं)।

पर जाएं VSIX गैलरी डाउनलोड पृष्ठ और वेब संकलक डाउनलोड करने के लिए चुनें।

यहाँ छवि विवरण दर्ज करें

ध्यान दें कि मैंने विजुअल स्टूडियो में टूल्स / एक्सटेंशन्स और अपडेट्स को चुनकर पहले ऐसा किया था । यद्यपि यह काम करने लगता था, मैंने पाया कि मेरी आंशिक SCSS फाइलें सीएसएस के लिए स्वचालित रूप से संकलित नहीं की जा रही थीं, जब मैंने उन्हें परिवर्तन किया (मैं केवल एक नहीं था )।

अब आपको अपनी मास्टर SCSS फ़ाइल पर राइट-क्लिक करने में सक्षम होना चाहिए और नीचे दिखाए गए विकल्पों को चुनना चाहिए, जो स्वचालित रूप से आपके प्रोजेक्ट के रूट में compilerconfig.json नामक एक फ़ाइल बना सकते हैं (यह कदम संभवतः अनावश्यक है यदि आपके पास यह फ़ाइल है) :

यहाँ छवि विवरण दर्ज करें

इस बिंदु से, सब कुछ ठीक काम करने लगा। ओह! इस विस्तार के लिए मैड्स क्रिस्टेंसन का धन्यवाद - कुछ भी नया सीखने से बचने के लिए ...


6
मुझे यह टिप्पणी समझ में नहीं आती है! निश्चित नहीं है कि स्वीकृत उत्तर क्या है, लेकिन उनमें से कोई भी मेरे द्वारा दिए गए समान नहीं है।
एंडी ब्राउन

1
स्वीकृत उत्तर उस पर हरे रंग की टिक के साथ है। वर्तमान में इसमें सबसे अधिक अपवोट हैं और यह एक ही वेब कंपाइलर एक्सटेंशन का उपयोग करने का सुझाव देता है। वैसे भी मुझे चित्रों के कारण आपका उत्तर पसंद है।
मिखाइल शिशकोव

1
धन्यवाद। मेरा जवाब गुलाप / ग्रंट का उपयोग किए बिना एक समाधान देता है, और अतिरिक्त विस्तार भी देता है जिसकी लोगों को आवश्यकता होगी। मैंने टिक किए हुए उत्तर (दूसरों के बीच) को देखा, लेकिन यह ऊपर की अतिरिक्त जानकारी के बिना मेरी समस्या का समाधान नहीं करता था - इसलिए मैंने पोस्ट करने का प्रयास क्यों किया, बस दूसरों को उसी समय को बर्बाद करने से बचने के लिए जो मैंने इसे हल करने की कोशिश में बिताया है। ।
एंडी ब्राउन

1
स्वीकार किए गए उत्तर को पढ़ने की कोशिश करें, यह एक ही बात कह रहा है, लेकिन यह भी सुझाव देता है कि गुल का उपयोग कैसे करें
कीथ निकोलस

ठीक है, मैं देख रहा हूं कि स्वीकृत जवाब एक ही बात कहता है - इसलिए मेरा अभी और विस्तार है। उम्मीद है कि मेरे जैसे आलसी पाठकों को यह उपयोगी लग सकता है!
एंडी ब्राउन

8

सरल उत्तर:


5

मेरे पिछले जवाब ने मेरे लिए कुछ महीनों तक काम किया, लेकिन अब कोई काम नहीं करता। जब मैं संकलन करने की कोशिश करता हूं, तो मुझे CompilerConfig स्कीमा के साथ समस्याओं के बारे में त्रुटियों की खिड़की में एक संदेश मिलता है, और इसे हल नहीं कर सकता (न तो Googling और न ही स्थापना / स्थापना रद्द करने में मदद की)।

तो एक वैकल्पिक उत्तर CompileSASS का उपयोग करना है , जो एक बहुत सरल ऐड-इन है, (बहुत) कम ऑनलाइन प्रलेखन के साथ, लेकिन जो खूबसूरती से काम करता है। केवल डाउनसाइड मैं देख सकता हूं:

  • सीएसएस उत्पन्न एससीएसएस के समान फ़ोल्डर में है, इसलिए मुझे इसे समायोजित करने के लिए अपनी वेबसाइट में चीजों को थोड़ा स्थानांतरित करना होगा; तथा
  • सीएसएस उत्पन्न केवल, जहाँ तक मैं देख सकता हूँ, को छोटा किया गया है

ऐड-इन स्थापित करने के बाद (मैं VS 2017 का उपयोग कर रहा हूं), आप सेटिंग बदलने के लिए टूल्स> विकल्पों में जा सकते हैं:

यहाँ छवि विवरण दर्ज करें

यहाँ उम्मीद है कि मैं अब काम फिर से शुरू कर सकता हूँ! सभी ऐड-इन लेखकों के लिए धन्यवाद, वैसे - का मतलब यह नहीं है।


1
अच्छी बात है कि मैंने इस बार सभी तरह से स्क्रॉल किया। मैं बस आपके प्रचलित का पालन करने वाला था। जवाब। हो सकता है कि आप इसे नोट के साथ अपडेट करें, अगर आपको लगता है कि जवाब अब और काम नहीं करता है। :)
रेडबाइक्स

एक जादू की तरह काम किया। बहुत बहुत धन्यवाद।
रेड्बेक्स

1
यदि आपके पास पहले से ही वेब कंपाइलर हैं और इस पोस्ट में वर्णित समान त्रुटियों का सामना कर रहे हैं, तो मेरी पोस्ट यहाँ देखें: stackoverflow.com/a/55290276/3609362 github.com/madskristensen/WebCompiler/issues-…
मैट जी

मैंने अभी विजुअल स्टूडियो 2019 के लिए वेब कंपाइलर डाउनलोड किया है, और अब तक यह पूरी तरह से काम कर रहा है। क्या कोई समस्या Visual Studio 2017 के लिए विशिष्ट है?
एंडी ब्राउन

2

अब एक कम विशिष्ट संकलक भी है। https://github.com/madskristensen/LessCompiler


मैंने एक्सटेंशन डाउनलोड और इंस्टॉल किया। मैंने तब अपनी Site.less फ़ाइल खोली और मैं देख सकता हूँ कि कंपाइलर पर ट्यून करने के लिए वॉटरमार्क कहाँ है। मैंने तब अपनी साइट पर एक बिल्ड किया था और साथ ही इसे डिबग मोड में खोला था। जब मैं अपना Site.css खोलता हूं, जो Site.less के अंतर्गत है, तो उस पर जनरेट किया गया तरबूज है। फिर मैं एक नई जोड़ी गई संपत्ति की खोज करने की कोशिश करता हूं लेकिन यह वहां नहीं है और मुझे मेरा सीएसएस नहीं मिल रहा है। कैसे मैं अपना LESS बनाने के लिए इसे प्राप्त कर सकता हूं, इस पर कोई विचार?
कावरमैन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.