सीएसएस अगले चर का उपयोग ग्लोबली

Question

मेरे पास http://cssnext.io के साथ पोस्टसीएसएस पार्सर स्थापित है और मेरी सभी थीम सेटिंग्स को रखने के लिए variables.css फ़ाइल सेट अप करने का तरीका जानने का प्रयास कर रहा हूं।

अब तक variable.css वार्स

:root { 
    --color-white: #FFF; 
    --color-black: #000; 
} 

के एक जोड़े के साथ इस तरह लग रहा है मैं की तुलना में यह आयात मेरी अन्य फ़ाइलें जहां मैं इन चर का उपयोग करना चाहते हैं, तो @import './variables.css' या इसी तरह की और उसके बाद की तरह है कि फ़ाइल में उपयोग में उदाहरण के लिए background-color: var(--color-white), हालांकि मैं follwoing हो चेतावनी:

चर '--color सफेद' अपरिभाषित और एक वापस आने बिना प्रयोग किया जाता है [postcss-कस्टम गुण]

Answer 1

आप अधिक जानकारी के लिए postcss आयात स्थापित करने के लिए

$ npm install postcss-import

चेक इस post कैसे स्थापित करने का प्रयास कर सकते हैं।

संपादित postcss-import का उपयोग करते हुए समस्या हल हो जाती है, हालांकि ऐसे वर्तमान में नवीनतम संस्करण, स्थिरता

Answer 2

एक अन्य समाधान अगर आप अपने जावास्क्रिप्ट कोड के साथ अपने चर साझा करना चाहते हैं के लिए उपयोग v 7.x से जारी कर रहे हैं, करने के लिए है postcss-custom-Properties "चर" विकल्प पर भरोसा करें। http://cssnext.io/usage/#features

:

यहाँ एक postcss-cssnext config का एक उदाहरण वैश्विक चर

require("postcss-cssnext")({ 
    features: { 
    customProperties: { 
     variables: { 
     mainColor: "red", 
     altColor: "blue", 
     } 
    } 
    } 
}) 

स्रोत पारित करने के लिए है