सीएसएस मॉड्यूल और वेबपैक

Question

के साथ एसएएस मैं वेबपैक, सैस और सीएसएस मॉड्यूल का उपयोग करके थोड़ी देर के लिए एक परियोजना का निर्माण कर रहा हूं।

:local(.button) { 
    color: white; 
} 

और मेरी प्रतिक्रिया घटकों में, render विधि में, मैं शैलियों की आवश्यकता होती है: आम तौर पर मेरी .scss फाइलों में, मैं एक वर्ग की तरह परिभाषित

render =() => { 
    const styles = require('./MyStyles.scss'); 
    <div className={ styles.button } /> 
} 

और पूरी दुनिया के साथ अच्छा है। सबकुछ अपेक्षित के रूप में काम करता है।

अब आज मैं CSS Modules page के माध्यम से पढ़ रहा था और पाया है कि चयनकर्ताओं में से कोई भी :local() मेरे जैसे से घिरा रहे थे और इसके अलावा यह है कि वे की तरह शैलियों का आयात गया:

import styles from './MyStyles.scss'; 

और मुझे लगा "वाह कि ज्यादा लग रहा है अच्छा, यह देखना आसान है कि यह कहां आयात किया गया है, ect। और मुझे :local() का उपयोग न करना पसंद है और केवल डिफ़ॉल्ट रूप से चीजें स्थानीय हैं। " तो मैंने कोशिश की और तुरंत कई समस्याओं में भाग गया।

1) './MyStyles.scss' से आयात शैलियों;

जब आयात:

क्योंकि मैं अपने प्रतिक्रिया फाइलों पर ESLint उपयोग कर रहा हूँ, मैं तुरंत जो आम तौर पर मतलब होगा एक डिफ़ॉल्ट निर्यात लेकिन सीएसएस मॉड्यूल पेज कहा नहीं है कि MyStyles.scss फेंका कोई त्रुटि मिलती है जेएस मॉड्यूल से सीएसएस मॉड्यूल, यह स्थानीय नामों से वैश्विक नामों के सभी मैपिंग के साथ ऑब्जेक्ट निर्यात करता है।

इसलिए मुझे स्वाभाविक रूप से स्टाइलशीट का डिफ़ॉल्ट निर्यात उस ऑब्जेक्ट के रूप में अपेक्षित होने की उम्मीद है जिसे वे संदर्भित कर रहे हैं।

2) मैं अपरिभाषित के रूप में import { button } from './MyStyles.scss';

यह linting उत्तीर्ण लेकिन button लॉग की कोशिश की।

3) यदि मैं अपनी शैलियों को आयात करने की require विधि पर वापस लौटाता हूं, तो :local के साथ निर्दिष्ट कुछ भी अपरिभाषित नहीं है।

संदर्भ के लिए, मेरी webpack लोडर (मैं भी Node-Neat और Node-Bourbon, दो भयानक पुस्तकालयों शामिल कर रहा हूँ):

{ test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) + 
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' + path.resolve(__dirname, '..', 'src/client/') } 

मेरे सवालों का, इस सब के बाद, इस प्रकार हैं:

1) का उपयोग करते समय एसएएस के साथ सीएसएस मॉड्यूल, क्या मैं :local या :global का उपयोग करने के लिए सीमित हूं?

2) चूंकि मैं वेबपैक का उपयोग कर रहा हूं, क्या इसका मतलब यह भी है कि मैं केवल require मेरी शैलियों को कर सकता हूं?

Answer 1

पोस्ट करने के तुरंत बाद, मैंने समाधान निकाला। समस्या, जो मैंने सोचा था काफी उलझन में था, मेरी वेबपैक कॉन्फ़िगरेशन में था। मूल रूप से मेरी लोडर देखा की तरह:

loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap 

जो 1 करने के लिए) require मेरी सास मेरे लिए सक्षम है और 2) :local में मेरी शैली लपेटो।

हालांकि, सीएसएस लोडर modules विकल्प याद आ रही थी, ताकि यह देखा की तरह:

loader: 'style!css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap 

अब मैं अपने शैलियों import कर सकते हैं और मैं उन्हें :local में रैप करने के लिए की जरूरत नहीं है (हालांकि मैं मैं अभी भी अनुमान अगर मैं चाहता हूं)।

मुझे यह सब कुछ सबसे दिलचस्प लगता है कि modules विकल्प के बिना, कोई भी अभी भी सीएसएस मॉड्यूल-एस्क्यू सुविधाओं का उपयोग कर सकता है, हालांकि कुछ हद तक सीमित है।

संपादित करें:

कुछ मैंने देखा है, जिसे इस जवाब पर लग रहा है के लिए एक भविष्य चेतावनी, यदि आप अपने जावास्क्रिप्ट कोड में आयात एक प्रकार का वृक्ष के eslint-plugin-import का उपयोग कर रहे है, यह की तरह शैलियों आयात करने पर एक त्रुटि फेंक होगा :

import styles from './MyStyles.scss'; 

जिस तरह सीएसएस मॉड्यूल परिणामस्वरूप शैलियों ऑब्जेक्ट को निर्यात करता है। इसका मतलब यह है कि आपको किसी भी चेतावनी या त्रुटियों को बाईपास करने के लिए require('./MyStyles.scss') करना होगा।