2016-06-12 12 views
5

मेरे पास वेबपैक पर एक प्रोजेक्ट है जिसे मैं एसएएसएस को पार करने के लिए सेटअप करने की कोशिश कर रहा हूं। मेरा मानना ​​है कि मैं काफी करीब हूं, हालांकि मेरे विन्यास (code and details in the gist here) के साथ समस्याएं हैं।ESLint के साथ आयात/कोई-अनसुलझा त्रुटियों को कैसे हल करें?

कोड यह है के रूप में साथ चल रहा है webpack पैदावार निम्न त्रुटि:

/foobar/src/js/components/App.jsx 
    6:8 error Unable to resolve path to module '../../scss/components/app' import/no-unresolved 

इस पर थोड़ी देर के खर्च करने के बाद, मैं ने कहा कि अगर मैं import '../../scss/components/app.scss' साथ App.jsx में import 'scss/components/app' लाइन की जगह, transpilation काम करता है। यह मैं ओर जाता है दो मुद्दों देखते हैं कि विश्वास करने के लिए:

  1. के बाद से रिश्तेदार के आयात काम मेरे resolve.root Webpack विन्यास काम नहीं कर रहा है, लेकिन नहीं निरपेक्ष वाले।
  2. मेरा resolve.extensions वेबपैक कॉन्फ़िगरेशन या तो लागू नहीं किया जा रहा है, क्योंकि मुझे इसे काम करने के लिए .scss फ़ाइल एक्सटेंशन जोड़ने की आवश्यकता है।

अन्य नोट:

  • मैं webpack 1.13.1 उपयोग कर रहा हूँ।
  • यदि मैं जानबूझकर एससीएसएस फ़ाइल में वाक्यविन्यास त्रुटियों को प्रस्तुत करता हूं, तो वेबपैक सही ढंग से उस फ़ाइल के मुद्दों के बारे में मुझे संकेत देता है।
  • मैंने किसी भी लाभ के लिए अपने resolve.root कॉन्फ़िगरेशन को सरणी (यानी [path.resolve(__dirname, './src')]) सेट करने का भी प्रयास किया है।
  • लक्ष्य-वार, मैं this example के समान कुछ हासिल करने की उम्मीद कर रहा हूं।
  • मैंने import पथ console-loader के साथ डीबग करने का प्रयास किया है और मुझे undefined मिल रहा है।

किसी भी मदद की सराहना की जाएगी, धन्यवाद!

अद्यतन: एक दोस्त ने अभी साझा की कि इस मुद्दे/sass-loader से नहीं आ रहा है आदि, लेकिन eslint से।। इसका मतलब है कि इस सवाल की प्रकृति काफी अलग होगी (कम वेबपैक, अधिक एस्लिंट)।

वैसे भी, मेरा .eslintrc एयरबीएनबी का विस्तार करता है, मुझे लगता है कि मुझे इसे this plugin में विवरण के आधार पर संशोधित करने की आवश्यकता है।

ब्याज का हिस्सा है:

settings: 
    import/ignore: 
    - node_modules  # mostly CommonJS (ignored by default) 
    - \.coffee$   # fraught with parse errors 
    - \.(scss|less|css)$ # can't parse unprocessed CSS modules, either 

मैं अपने .eslintrc नवीनीकृत किया है सदृश:

{ 
    "extends": "airbnb", 
    "settings": { 
     "import/ignore": [".scss$"] 
    } 
} 

लेकिन फिर भी हो रही है त्रुटियों। कोई विचार?

उत्तर

4

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

मुझे उत्सुकता है कि आपने प्रीलोडर के बजाय लोडर को एस्लिंट क्यों जोड़ा। आपको इसे प्रीलोडर में जोड़ना होगा।

+1

त्वरित प्रतिक्रिया के लिए धन्यवाद! 'Module.loaders' से' module.preloaders 'तक ESLint को स्थानांतरित करने से वास्तव में समस्या हल हो गई। –

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