SASS का उपयोग करते समय मैं एक अलग निर्देशिका से फ़ाइल कैसे आयात कर सकता हूं?

Question

SASS में, क्या किसी अन्य निर्देशिका से फ़ाइल आयात करना संभव है? उदाहरण के लिए, अगर मेरे पास इस तरह की संरचना थी:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

template.scss _common.scss का उपयोग करके आयात कर सकता है, @import "common"लेकिन क्या यह अधिक_स्टाइल्स के लिए संभव है। Scss _common.scss को आयात करने के लिए संभव है? मैं सहित कुछ अलग चीजों की कोशिश की @import "../sub_directory_a/common"और @import "../sub_directory_a/_common.scss"काम करने के लिए कुछ भी नहीं लगता है।

Answer 1

लगता है कि SASS में कुछ बदलाव संभव हो गए हैं जो आपने शुरू में करने की कोशिश की है:

@import "../subdir/common";

हम भी कुछ पूरी तरह से असंबंधित फ़ोल्डर में स्थित के लिए काम करने के लिए मिल गया c:\projects\sass:

@import "../../../../../../../../../../projects/sass/common";

बस ../यह सुनिश्चित करने के लिए पर्याप्त जोड़ें कि आप ड्राइव रूट पर समाप्त हो जाएंगे और आप जाने के लिए अच्छे हैं।

बेशक, यह समाधान बहुत दूर है, लेकिन मुझे काम करने के लिए पूरी तरह से अलग फ़ोल्डर से आयात नहीं मिल सकता है, न I c:\projects\sassही पर्यावरण चर का उपयोग कर और न ही सेटिंग SASS_PATH( :: load_paths संदर्भ ) उसी मूल्य पर।

Comments

यह "सुंदर से बहुत दूर" है! लेकिन इस जवाब को बहुत उभार मिल रहे हैं। क्या यह वास्तव में एक बेहतर अभ्यास माना जाता है -I? यदि वह पाथनेम बदल जाता है, तो बहुत सारे खोज और प्रतिस्थापन होंगे; और इसे किसी को भी साझा करने के लिए उसी स्थानीय फ़ोल्डर संरचना की आवश्यकता है ।scss

— WiseOldDuck 19

"बस पर्याप्त जोड़ें ../ यह सुनिश्चित करने के लिए कि आप ड्राइव रूट पर समाप्त हो जाएंगे और आप जाने के लिए अच्छे हैं।" हाहाहा जिसने मेरा दिन बना दिया।

— स्टीव हैरिसन

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

— ०५२ ad

@ adi518: मैं आपके कथन के बारे में तर्क दे सकता हूं "यदि आप चाहते हैं कि आपका कोड आसानी से टूट जाए, तो इसका उपयोग करें।" दिए गए समाधान हमारे लिए कभी काम कर रहे हैं (इसलिए अब लगभग 4 साल) और कुछ भी नहीं तोड़ा है। मुझे लगता है कि यह उन समाधानों में से एक है जो कुछ हद तक गंदे हो सकते हैं लेकिन काम को जल्दी से पूरा कर लें और इसमें शामिल कुछ उपकरणों के आंतरिक हिस्से में बहुत गहराई तक खुदाई किए बिना।

— ओलिवर

गंभीरता से ऐसा नहीं करते।

— shinzou

Answer 2

आप Sass के लोड पथ में जोड़ने के लिए रूबी कोड से -Iकमांड लाइन स्विच या :load_pathsविकल्प का उपयोग कर सकते हैं sub_directory_a। तो अगर आप सेस चला रहे हैं root_directory, तो कुछ इस तरह से करें:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

तो फिर तुम बस का उपयोग कर सकते @import "common"में more_styles.scss।

Comments

महान। ठीक यही मैं जानना चाहता था। और मुझे लगता है कि मिस्टरजैक भी कुछ है, लेकिन ऐसा लगता है कि कम्पास के पास सिर्फ एक फ़ोल्डर है जो पहले से ही पथ पर है।

— स्पाकार्की 21

चेन -I झंडे एक से अधिक निर्देशिका शामिल करने के लिए, जैसेsass -I sub_directory_a -I sub_directory_c --watch sub_directory_b:sub_directory_b

— बॉब एस्पोनाजा

Answer 3

सैस-लोडर के साथ वेबपैक का उपयोग करना मैं ~प्रोजेक्ट रूट पथ को संदर्भित करने के लिए उपयोग कर सकता हूं । उदाहरण के लिए ओपीएस फ़ोल्डर संरचना और यह कि आप एक फाइल में हैं sub_directory_b:

@import "~sub_directory_a/_common";

प्रलेखन: https://github.com/webpack-contrib/sass-loader#resolve-import-at-rules

Comments

यह node_modules/परियोजना की जड़ से नहीं बल्कि आयात से लगता है ।

— Splaktar

मुझे "sub_directory_a"अपने जोड़ includePathsऔर @import "common";सिंटैक्स का उपयोग करना था जब कोणीय सीएलआई का उपयोग करना जिसमें सैस-लोडर शामिल है।

— Splaktar

यह स्वीकृत उत्तर होना चाहिए।

— 14

स्पलैकटर से सहमत। सैस-लोडर डॉक्स से: वेबपैक फाइलों को हल करने के लिए एक उन्नत तंत्र प्रदान करता है। सैस-लोडर वेबसॉलूज़िंग इंजन के सभी प्रश्नों को पास करने के लिए सैस के कस्टम इंपॉर्टेंट फ़ीचर का उपयोग करता है। इस प्रकार आप अपने Sass मॉड्यूल को node_modules से आयात कर सकते हैं। वेबपैक को बताने के लिए बस उन्हें ~ के साथ प्रस्तुत करें कि यह कोई सापेक्ष आयात नहीं है ... इसे केवल ~ के साथ प्रस्तुत करना महत्वपूर्ण है, क्योंकि ~ / होम निर्देशिका में हल होता है।

— एंथनी

ध्यान दें कि ~/मेरे लिए घर निर्देशिका का संदर्भ नहीं है। या किसी भी निर्देशिका मैं परीक्षण करने की कोशिश की है। क्या वास्तव में कोशिश करने और यह पता लगाने का कोई तरीका है कि यह कहां है ??

— डगलस गास्केल

Answer 4

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

1. SCSS संकलक के लिए खोज लक्ष्य के रूप में लक्ष्य SCSS पथ जोड़ें। यह स्टाइलशीट फ़ोल्डर को scss config फाइल में जोड़कर प्राप्त किया जा सकता है, यह आपके द्वारा उपयोग किए जा रहे ढांचे का कार्य है।

उपयोग :load_paths पर config.rdकम्पास आधारित चौखटे के लिए (उदा। रेल)

निम्न कोड का उपयोग scss-config.jsonके लिएfourseven/meteor-scss

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}

2. निरपेक्ष पथों (बनाम सापेक्ष पथ) का उपयोग करें।

उदाहरण के साथ fourseven/meteor-scss, आप {}निम्न परीक्षा के अनुसार अपनी परियोजना के शीर्ष स्तर को उजागर करने के लिए उपयोग कर सकते हैं

@import "{}/node_modules/module-name/stylesheet";

Comments

इसके लिए कुछ भी विशिष्ट नहीं है meteor, यह केवल एक उदाहरण था।

— हेलकोड

Answer 5

चयनित उत्तर एक व्यवहार्य समाधान प्रदान नहीं करता है।

ओपी का अभ्यास अनियमित लगता है। एक साझा / आम फ़ाइल आम तौर पर partialsएक मानक बॉयलरप्लेट निर्देशिका के अंतर्गत रहती है । आपको तब जोड़ना चाहिएpartials अपने कोड में कहीं भी धारावाहिकों को हल करने के लिए अपने कॉन्फ़िगरेशन आयात पथों में निर्देशिका ।

जब मुझे पहली बार इस मुद्दे का सामना करना पड़ा, तो मुझे लगा कि SASS शायद आपको नोड के समान एक वैश्विक वैरिएबल प्रदान __dirnameकरता है, जो वर्तमान कार्य निर्देशिका ( cwd) के लिए एक पूर्ण मार्ग रखता है । दुर्भाग्य से, ऐसा नहीं है और यही कारण है कि एक @importनिर्देश पर प्रक्षेप संभव नहीं है, इसलिए आप एक गतिशील आयात पथ नहीं कर सकते।

SASS डॉक्स के अनुसार ।

आपको :load_pathsअपने Sass config में सेट करना होगा । चूंकि ओपी कम्पास का उपयोग करता है, इसलिए मैं यहां प्रलेखन के अनुसार उसका पालन करूंगा ।

आप सीएलआई समाधान के साथ purposed के रूप में जा सकते हैं, लेकिन क्यों? इसे जोड़ने के लिए यह बहुत अधिक सुविधाजनक है config.rb। यह overriding के लिए CLI का उपयोग करने के लिए समझ में आता है config.rb(जैसे, विभिन्न बिल्ड परिदृश्य)।

तो, मान लें कि आपका config.rbप्रोजेक्ट रूट के तहत है, बस निम्नलिखित पंक्ति जोड़ें: add_import_path 'sub_directory_a'

और अब @import 'common';कहीं भी ठीक काम करेगा।

जबकि यह जवाब देता है कि ओपी, अधिक है।

अनुबंध

आपको उन मामलों में भाग लेने की संभावना है जहां आप एक सीएसएस फ़ाइल को एक एम्बेडेड तरीके से आयात करना चाहते हैं, अर्थात्, वेनिला @importनिर्देश के माध्यम से नहीं है सीएसएस बॉक्स से बाहर प्रदान करता है, लेकिन आपके पास के साथ सीएसएस फ़ाइल सामग्री का एक वास्तविक मर्ज। एक और सवाल है , जिसका जवाब अनिश्चित रूप से दिया गया है (समाधान क्रॉस-एनवायरनमेंट काम नहीं करता है)। फिर समाधान, इस SASS एक्सटेंशन का उपयोग करना है ।

एक बार स्थापित होने के बाद, निम्न पंक्ति को अपने विन्यास में जोड़ें: require 'sass-css-importer'और फिर, अपने कोड में कहीं:@import 'CSS:myCssFile';

ध्यान दें कि इस कार्य के लिए एक्सटेंशन को छोड़ दिया जाना चाहिए।

हालाँकि, हम उसी मुद्दे पर चलेंगे जब एक सीएसएस फ़ाइल को एक गैर-डिफ़ॉल्ट पथ से आयात करने की कोशिश की जाती है और add_import_pathसीएसएस फाइलों का सम्मान नहीं करता है। तो इसे हल करने के लिए, आपको अपने कॉन्फ़िगरेशन में एक और लाइन जोड़ने की आवश्यकता है, जो स्वाभाविक रूप से समान है:

add_import_path Sass::CssImporter::Importer.new('sub_directory_a')

अब सब कुछ अच्छी तरह से काम करेगा।

पुनश्च, मैंने देखा है कि sass-css-importerदस्तावेज़ इंगित करता है CSS:कि .cssएक्सटेंशन को छोड़ने के अलावा एक उपसर्ग आवश्यक है । मुझे पता चला कि यह परवाह किए बिना काम करता है। किसी ने एक मुद्दा शुरू किया , जो अब तक अनुत्तरित रहा।

Answer 6

आपकी एसएएस फाइलों को देखने के लिए और अन्य फाइल के रास्तों को शामिल करने के लिए भी गुलप काम करेगा। उदाहरण:

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
    .pipe(gulp.dest('css'));
});

Comments

आप समझते हैं कि शामिल हैंPaths केवल -Iकमांड लाइन से विकल्प का उपयोग कर रहे हैं , है ना?

— cimmanon

Answer 7

node-sass(के लिए आधिकारिक एसएएस रैपर node.js) एक कमांड लाइन विकल्प प्रदान करता है--include-path इस तरह की आवश्यकताओं के साथ मदद लिए ।

उदाहरण:

इन package.json:

"scripts": {
    "build-css": "node-sass src/ -o src/ --include-path src/",
}

अब, यदि आपके पास src/styles/common.scssअपनी परियोजना में एक फ़ाइल है, तो आप इसे आयात कर सकते हैं@import 'styles/common'; अपनी परियोजना में कहीं भी ।

देखें https://github.com/sass/node-sass#usage-1 अधिक जानकारी के लिए।

Answer 8

आयात करने के लिए फ़ाइल को परिभाषित करने के लिए सभी फ़ोल्डर्स सामान्य परिभाषाओं का उपयोग करना संभव है। आपको बस यह पता होना चाहिए कि यह फ़ाइल के सापेक्ष है जिसे आप इसे परिभाषित कर रहे हैं। उदाहरणों के साथ आयात विकल्प के बारे में अधिक जानकारी आप यहां देख सकते हैं ।

Answer 9

अगर उपयोग कर रहे हैं विज़ुअल स्टूडियो में वेब कंपाइलर कर रहे हैं, तो आप कंपाइलरकोन्फिग.जॉन.डेफ़ल्ट्स में पथ जोड़ सकते हैं includePath। फिर कुछ संख्या की आवश्यकता नहीं है../ क्योंकि संकलक आयात को देखने के लिए स्थान के रूप में शामिलपाठ का उपयोग करेगा।

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

"includePath": "node_modules/foundation-sites/scss",

Answer 10

यह एक आधा उत्तर है।

कम्पास की जांच करें , इसके साथ आप अपने फ़ोल्डर के _common.scssअंदर रख सकते हैं partials, और फिर इसके साथ आयात कर सकते हैं @import common, लेकिन यह हर फ़ाइल में काम करता है।

Comments

मुझे लगता है कि मिक्का की प्रतिक्रिया वास्तव में वही थी जो मैं था, लेकिन अब मैं कम्पास के बारे में भी उत्सुक हूं। क्या किसी विशेष परियोजना के लिए किसी भी तरह की धारावाहिक निर्देशिका विशिष्ट है? या कम्पास की निर्देशिका में रखी गई फाइलें "विश्व स्तर पर" उपलब्ध होंगी, जहां भी कम्पास का उपयोग किया जाता है?

— स्पाकार्की 21

इस सवाल का जवाब बिल्कुल नहीं है।

— cimmanon

Answer 11

मैं एक समस्या मे फंस गया। मेरे समाधान से मैं इसमें आया। तो यहाँ आपका कोड है:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

जहाँ तक मुझे पता है कि अगर आप एक स्कैस को दूसरे को इम्पोर्ट करना चाहते हैं तो उसे एक आंशिक होना चाहिए। आप अलग अलग निर्देशिका से आयात कर रहे हैं जब आपके नाम more_styles.scssके लिए _more_styles.scss। फिर इसे अपने template.scssइस @import की तरह इम्पोर्ट करें ../sub_directory_b/_more_styles.scss। इसने मेरे लिए काम किया। लेकिन जैसा कि आपने ../sub_directory_a/_common.scssकाम नहीं किया है । उसी की निर्देशिका है template.scss। यही कारण है कि यह काम नहीं करेगा।

Answer 12

इनकपैथ पैरामीटर का उपयोग करते हुए देखें ...

"SASS कंपाइलर SASS @imports को हल करते समय लोडपैथ में प्रत्येक पथ का उपयोग करता है।"

https://stackoverflow.com/a/33588202/384884

Answer 13

सबसे अच्छा तरीका उपयोगकर्ता सास-लोडर है। यह npm पैकेज के रूप में उपलब्ध है। यह सभी पथ संबंधी मुद्दों को हल करता है और इसे सुपर आसान बनाता है।

Answer 14

मुझे एक ही समस्या थी और मुझे फ़ाइल में पथ जोड़कर समाधान मिल गया जैसे:

@import "C: / xampp / htdocs / Scss_addons / बूटस्ट्रैप / बूटस्ट्रैप";

@import "C: / xampp / htdocs / Scss_addons / Compass / कम्पास";

Comments

जबकि इसी तरह का उत्तर पहले दिया गया है, सामान्य उत्तर के रूप में सर्वर के लिए पूर्ण विशिष्ट पथ थोड़ा सा है (आप "जैसे", निश्चित रूप से कहा था)।

— dakab