वेबपैक का उपयोग करके node_modules से स्थैतिक सीएसएस फ़ाइलों को लोड करने का उदाहरण?

Question

मैं webpack साथ node_modules libs से किसी भी सीएसएस लोड करने के लिए कैसे पता नहीं है, उदाहरण के लिए मैं पत्रक और लोड के प्रत्येक प्रयास leaflet/dist/leaflet.css विफल रहता है स्थापित किया है।

आप उदाहरण प्रदान कर सके कैसे node_modules से स्थिर शैलियों लोड करने के लिए?

मेरे वर्तमान webpack नीचे config। Additionaly मैं extract-text-webpack-plugin उपयोग कर रहा हूँ और sass-loader अपने प्रोजेक्ट एससीएसएस फ़ाइलों में अच्छी तरह से काम कर रहे हैं, मैं भी css-loader मैं स्थिर सीएसएस फ़ाइलों को हल या stylePathResolves के लिए कुछ जोड़ने के लिए, है?

//require('leaflet/dist/leaflet.css'); 

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var webpack = require("webpack"); 
var path = require('path'); 

var stylePathResolves = (
    'includePaths[]=' + path.resolve('./') + '&' + 
    'includePaths[]=' + path.resolve('./node_modules') 
) 

module.exports = { 
    entry: ".js/app.js", 
    output: { 
    path: "./static/js", 
    filename: "app.js" 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     }, { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract(
      'style', 
      'css' + '!sass?outputStyle=expanded&' + stylePathResolves 
     ) 
     } 
    ] 
    }, 
    plugins: [new ExtractTextPlugin("app.css")] 
}; 

कहाँ leaflet.css लोड करने के लिए, बाहर require('leaflet/dist/leaflet.css') टिप्पणी की मुझे निम्न त्रुटि देता है:

home/myproj/node_modules/leaflet/dist/leaflet.css:3 
.leaflet-map-pane, 
^ 

SyntaxError: Unexpected token . 

Answer 1

उपयोगकर्ताओं को, जो एक ऐसी ही समस्या का सामना करना पड़ा के लिए, वहाँ चरण हैं, जो मैं इसे काम कर पाने के किया है कर रहे हैं , मुझे यकीन नहीं है कि यह संतुलन तरीका है।

जोड़ने css-loaderSyntaxError: Unexpected token . से छुटकारा पाने के लिए और अगले file-loader जोड़ने और फ़ाइलों से मेल खाते हैं:

1. npm install file-loader --save
2. निम्नलिखित तरीके से
3. परिवर्तन webpack.config.js मुख्य app.js में import 'leaflet/dist/leaflet.css'; जोड़ने Uncaught Error: Cannot find module "./images/layers.png" से छुटकारा पाने के लिए:

   module.exports = { 
       entry: "./web/static/js/app.js", 
       output: { 
       path: "./priv/static/js", 
       filename: "app.js" 
       }, 
       module: { 
       loaders: [{ 
        test: /\.jsx?$/, 
        exclude: /node_modules/, 
        loader: 'babel' 
       }, { 
        test: /\.scss$/, 
        loader: ExtractTextPlugin.extract(
        'style', 
        'css' + '!sass?outputStyle=expanded&' + stylePathResolves 
       ) 
       }, { 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
       }, { 
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, 
        loader: 'file-loader' 
       }] 
       }, 
       plugins: [new ExtractTextPlugin("app.css")] 
   }; 
   

   शुरुआत में मुझे कुछ उदाहरण से यह कॉन्फ़िगर मिला और यह 100% स्पष्ट नहीं है कि मैंने एसएसएस लोड करने के लिए ExtractTextPlugin का उपयोग क्यों किया है और सीएसएस-लोडर के साथ सहसंबंध क्या है, शायद इस भाग में एक्स्ट्रेक्ट टेक्स्टप्लगिन का उपयोग करने के लिए मुझे अधिक सुसंगत होना चाहिए , शायद कोई जानता है और कोड समीक्षा कर सकते हैं? लेकिन मेरा समाधान काम कर रहा है और मैं आगे काम कर सकता हूं।