2017-06-28 10 views
6

बनाने प्रतिक्रिया एप्लिकेशन के तहत एक App.js कि इस तरह दिखता है के साथ शुरू होता है:सीएसएस में जोड़ने बनाने प्रतिक्रिया-ऐप

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

export default App; 

नोट import './App.css' - इस सीएसएस फ़ाइल के एक गुमनाम आयात। App.css में App और App-header जैसे सीएसएस वर्ग हैं जिन्हें संदर्भ घटक के render विधि में स्ट्रिंग द्वारा संदर्भित किया जाता है। यह जादू कैसे जुड़ा हुआ है? क्या यह सीएसएस-लोडर एनपीएम पैकेज का एक कार्य है? यदि हां, तो यह कार्यक्षमता कहां दस्तावेज़ीकृत है? मैंने वेबपैक कॉन्फ़िगरेशन की जांच करने के लिए ऐप निकाला है, लेकिन यह लिंकिंग कैसे हो रहा है इस पर मेरी अंगुली डालने में सक्षम नहीं है।

उत्तर

4

create-react-app README के अनुसार, सीएसएस आयात वेबपैक प्लगइन द्वारा संभाला जाता है।

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

create-react-app का उपयोग करके बनाई गई प्रोजेक्ट की बिल्ड सिस्टम react-scripts नामक किसी अन्य पैकेज में पाई जाती है। इस प्रोजेक्ट के package.jsonincludes a dependencycss-loader पर, जो कि सीएसएस आयात के लिए उपयोग की जाने वाली प्लगइन प्रतीत होता है।

0

यदि आप निर्माण-प्रतिक्रिया-ऐप का उपयोग कर रहे हैं, तो मेरे सबसे अच्छे ज्ञान के लिए सभी जादू को प्रतिक्रिया-स्क्रिप्ट मॉड्यूल के भीतर होना चाहिए जो स्थापित होता है और जब आप आरपीएम शुरू करते हैं तो चलता है।

संबंधित मुद्दे