एकाधिक मॉड्यूल से सीएसएस (एसएएस) शामिल करें

Question

मैं एक रेपो डाल रहा हूं जो एनपीएम पर उपलब्ध होगा। रेपो में कई मॉड्यूल होते हैं, react-leaflet और react-d3 के समान। आवेदन डेवलपर्स उदा, require/import के माध्यम से NPM पैकेज के भीतर से मॉड्यूल शामिल होंगे .:

import { ModuleOne, ModuleTwo } from 'myNpmPackage`; 

मैं इन मॉड्यूल में से प्रत्येक के साथ सीएसएस पैकेज की जरूरत है, और कहा कि सीएसएस प्रत्येक मॉड्यूल के भीतर सास फाइलों से संकलित किया जाएगा।

myNpmPackage की तरह के लिए एक फ़ोल्डर संरचना को देखते हुए:

├── src 
│ ├── ModuleOne 
│ │ ├── index.js 
│ │ ├── style.scss 
│ ├── ModuleTwo 
│ │ ├── index.js 
│ │ ├── style.scss 
├── package.json 

क्या एक अच्छा प्रवाह उन .scss फ़ाइलें बनाने के लिए प्रकाशित है (.css में संकलित) myNpmPackage के उपभोक्ताओं के लिए उपलब्ध, की आवश्यकता होती है कि उपभोक्ताओं को स्पष्ट रूप से शामिल किए बिना/@import/link rel="stylesheet" सीएसएस?

मैं gulp और browserify का उपयोग कर रहा हूं और उस पाइपलाइन से चिपकना पसंद करूंगा।

---

अद्यतन: मैंने पाया parcelifyमैं क्या जरूरत के कुछ करता है। मैं myNpmPackage/package.json को निम्नलिखित जोड़ें:

"style": "src/**/*.scss", 
"transforms": [ 
    "sass-css-stream" 
] 

और dependencies को parcelify जोड़ने के लिए, इतना है कि यह myNpmPackage के साथ स्थापित किया गया है।

myNpmPackage के उपभोक्ताओं को तो उनके gulpfile के लिए निम्न जोड़ना होगा:

parcelify(b, { 
    bundles: { 
     style: './build/modules.css' 
    } 
}); 

parcelifymyNpmPackage के मॉड्यूल में सभी .scss फ़ाइलों को ख़त्म कर और उन्हें ./build/modules.css में बंडल करने myNpmPackage/package.json में "style" ग्लोब का प्रयोग करेंगे।

यह वहाँ हो रही है, लेकिन दो कारणों के लिए आदर्श नहीं:

1. प्रत्येक मॉड्यूल से सीएसएस फ़ाइलें सभी उपभोक्ता आवेदन निर्माण में शामिल किए गए हैं, भले ही नहीं सभी मॉड्यूल शामिल किए गए हैं;
2. इस रणनीति के लिए उपभोक्ता अनुप्रयोग डेवलपर को "बस काम करने" के बजाय अपने gulpfile पर कोड जोड़ने की आवश्यकता है।

Answer 1

Here is a Webpack setup कि वास्तव में करता है कि तुम क्या जरूरत है:

• केवल आयातित मॉड्यूल सीएसएस (ModuleThree उदाहरण के लिए नहीं है) the build में शामिल हैं।
• कुछ gulpfile.js या *.config.js अपडेट करने की कोई आवश्यकता नहीं है, प्रत्येक मॉड्यूल require its own stylesheet(s) किसी भी अन्य निर्भरता की तरह।

बोनस: ModuleTwo how to lazy load CSS से पता चलता है और यह भी एक पृष्ठभूमि छवि है जो किसी भी निर्भरता की तरह शामिल किया जाएगा और साथ ही होता है।

नोट: मैंने ES2015 वाक्यविन्यास का उपयोग नहीं किया था, लेकिन यदि आप babel-loader के साथ काम करना चाहते हैं तो आप कर सकते हैं।

Answer 2

यह आंशिक रूप से आपकी खुद की विकास पाइपलाइन पर निर्भर करता है। आप अपने ऐप के निर्माण पर अपने सभी एससीएसएस को सीएसएस में प्रस्तुत कर सकते हैं। इसलिए मान लें कि आपके पास एक ही सीएसएस फ़ाइल है जिसमें सभी शैलियों को प्रस्तुत किया गया है, आप इसे this plugin उदाहरण के लिए गल्प पारिस्थितिक तंत्र के भीतर विभिन्न विधियों का उपयोग करके एक जावास्क्रिप्ट फ़ाइल में शामिल कर सकते हैं।

function addStyleString(str) { 
    var node = document.createElement('style'); 
    node.innerHTML = str; 
    document.body.appendChild(node); 
} 

addStyleString('/* CSS File 1 */'); 

और अपने घूंट पाइप लाइन में:

var gfi = require("gulp-file-insert"); 

gulp.src('./sample.js') 
    .pipe(gfi({ 
    "/* CSS File 1 */": "path/to/main.css" 
    })) 
    .pipe(gulp.dest('./dist/')); 

संदर्भ: Inject CSS stylesheet as string using Javascript