"आपको इस फ़ाइल प्रकार को संभालने के लिए उचित लोडर की आवश्यकता हो सकती है" वेबपैक और सीएसएस

Question

के साथ मैं वेबपैक पर नया हूं, और मैं इसे अपने जावास्क्रिप्ट को पैक करने में सक्षम हूं, लेकिन सीएसएस मुझे बढ़ाता है। मैं एक बार आ रही है:

एक मेरी सीएसएस फ़ाइल की पहली पंक्ति "आप इस फ़ाइल प्रकार को प्रबंधित करने के लिए एक उचित लोडर आवश्यकता हो सकती है"। सीएसएस फ़ाइल सरल है:

body { 
    color:red 
} 

webpack.config.js इस तरह दिखता है:

module.exports = { 
    debug: true, 
    entry: [ './sdocs.js' ], 
    output: { 
     filename: './[name].bundle.js' 
    }, 
    loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
    ], 
} 

sdocs.js भी सरल है और इस तरह दिखता है:

require('./sdocs.css'); 

अंत में

वेबपैक चलाने का नतीजा इस तरह दिखता है:

ERROR in ./sdocs.css 
Module parse failed: C:\Users\Tim\PhpstormProjects\xxx\sdocs.css 
Unexpected token (1:5) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (1:5) 
at Parser.pp.raise (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:923:13) 
at Parser.pp.unexpected (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1490:8) 
at Parser.pp.semicolon (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1469:73) 
at Parser.pp.parseExpressionStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1994:8) 
at Parser.pp.parseStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1772:188) 
at Parser.pp.parseTopLevel (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1666:21) 
at Parser.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1632:17) 
at Object.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:885:44) 
at Parser.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack\lib\Parser.js:902:15) 
at DependenciesBlock.<anonymous> (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack\lib\NormalModule.js:104:16) 
at DependenciesBlock.onModuleBuild (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) 
at nextLoader (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) 
at C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 
at Storage.finished (C:\Users\Tim\PhpstormProjects\xxx\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) 
at C:\Users\Tim\PhpstormProjects\xxx\node_modules\graceful-fs\graceful-fs.js:78:16 
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3) @ ./sdocs.js 1:0-22 

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

मैं एक विंडोज़ प्लेटफॉर्म पर चलने रहा हूँ कि मायने रखती है

Answer 1

ठीक है,

यह वही है यह मेरे लिए तय करता है, तो किसी को भी इस पर चलने वाले है। मुद्दा webpack.config.js में था। अंत में काम करने वाला एक ऐसा दिखाई देता था:

module.exports = { 
    debug: true, 
    entry: [ './sdocs.js' ], 
    output: { 
     filename: './[name].bundle.js' 
    }, 
    module: { 
     loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
     ], 
    } 
} 

जो टुकड़ा गुम था वह लोडर कुंजी को मॉड्यूल कुंजी के नीचे ले जा रहा था।

Answer 2

मैंने 'मॉड्यूल' कुंजी में 'लोडर' निर्दिष्ट करने का प्रयास किया। लेकिन, यह मेरे लिए काम नहीं किया। मुझे लगता है कि 2.5.1 से ऊपर वेबपैक संस्करणों के लिए, 'मॉड्यूल' में एक नियम जोड़कर पूरी तरह से काम करता है।

अपने webpack.config.js

module: { 
    rules:[ 
     { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } 
    ] 
} 

में इस जोड़े जब आप एक नियम के रूप में जोड़ने आप कुंजी अलग था लोडर प्रदान करने के लिए नहीं होगा!

Answer 3

मैं आपके द्वारा मिलने वाली एक ही समस्या से मुलाकात की थी। हो सकता है कि आप देव पर्यावरण (हॉट रीलोड) में हों, टर्मिनल पर प्रक्रिया को मारने के लिए बस ctrl + c दबाएं, और dev env (npm run dev) को दोबारा खोलें।