वेबपैक के साथ एकाधिक थीम स्टाइलशीट निकालने के लिए कैसे?

Question

मैं एक प्रतिक्रिया ऐप थीमबल बनाने की कोशिश कर रहा हूं। अभी के लिए थीम में केवल अलग-अलग हेडर रंगों के विभिन्न सेट शामिल हैं जो विभिन्न शीर्षलेख रंगों को परिभाषित करते हैं, आदि

मेरी वर्तमान समझ से ExtractTextPlugin मेरी सबसे अच्छी शर्त प्रतीत होती है क्योंकि मैं नहीं चाहता कि मेरी शैलियों को रेखांकित किया जाए और इसके बजाय अलग हो प्रति विषय फाइलें।

src/scss/themes/theme-a.scss 
src/scss/themes/theme-b.scss 

विषयों मूल लेआउट और आम शैलियों आयात और प्रासंगिक चर ओवरराइड:

तो मैं दो विषयों बनाया।

लेकिन एक ही रास्ता मैं webpack बनाने के अलग सीएसएस फ़ाइलें दोनों विषयों के लिए बनाने में कामयाब रहे में प्रत्येक विषय के लिए अलग प्रवेश द्वारों का निर्माण करना था मेरी webpack.prod.config:

entry: { 
    app: './src/js/init.js', 
    theme-a: './src/scss/themes/theme-a.scss', 
    theme-b: './src/scss/themes/theme-b.scss' 
}, 

लेकिन हर के लिए एक नया प्रवेश बिंदु जोड़ने जोड़ा गया नया विषय गलत लगता है और मुझे लगता है कि एक बेहतर तरीका होना चाहिए?

Answer 1

यहाँ अपने समाधान है:

npm i --save-dev file-loader 

loaders अनुभाग में, जोड़ें:

{ 
    test: /themes\/.+\.scss$/, 
    loader: "file-loader?name=./compiled-themes/css/[name].css!css!sass" 
}, 

वहाँ, अधिक एससीएसएस फ़ाइलों हो सकता है यदि ऐसा है तो वहाँ एक और अनुभाग जो उन्हें हमेशा की तरह बंडल होना चाहिए, लेकिन विषयों को छोड़ देता है:

{ 
    test: /\.scss$/, 
    exclude: /themes\/.+\.scss$/, 
    loader: "css!sass" 
}, 

फ़ाइल लोडर फाइलनाम द्वारा फाइलें लिखता है, हैश ए एनडी एक्सटेंशन ताकि आप नाम को संरक्षित कर सकें।

name=./compiled-themes/css/[name].css भाग नोट करें, जहां [] वर्ण प्रतिस्थापित किए गए हैं।

https://github.com/webpack/file-loader

Answer 2

विषयों को मैन्युअल रूप से जोड़ने से बचने के लिए एक संभावित समाधान थीम फ़ोल्डर की सामग्री को पढ़ता है और प्रत्येक * .scss फ़ाइल के लिए प्रोग्रामिक रूप से एक प्रविष्टि जोड़ता है। इस की तर्ज पर

कुछ:

function getThemes(themePath) { 
    var themes = {}; 
    fs.readdirSync(themePath).forEach(function(fileName) { 
     var fileNameWithPath = path.join(themePath, fileName); 

     var stat = fs.lstatSync(fileNameWithPath); 
     if (stat.isDirectory()) return; 
     if (!/\.scss$/.test(fileName)) return; 

     var nameWithoutExt = path.basename(fileName, '.scss'); 
     themes[nameWithoutExt] = fileNameWithPath; 
    }); 

    return themes; 
} 

var themes = getThemes('./src/scss/themes'); 

var config= { 
    entry: _.merge({ app: './src/js/init.js' }, themes), 
    // rest of options 
}; 

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