वेबपैक में सैस स्टाइलशीट में उपयोग की गई छवियों को मैं कैसे लोड कर सकता हूं?

Question

मैं वेबपैक का उपयोग कर रहा हूं ताकि मेरे मॉड्यूल को बंडल किया जा सके और एसएएस का उपयोग प्रतिक्रिया आधारित अनुप्रयोग में स्टाइलिंग उद्देश्य के लिए किया जा सके।

एक अलग स्टाइल शीट का उपयोग करके मैं एक घटक की पृष्ठभूमि-छवि सेट कर रहा हूं और उस शैली-पत्र को index.js में लोड किया गया है। स्टाइल शीट में सभी शैलियों को पृष्ठभूमि छवि को छोड़कर उस घटक पर लागू हो जाता है।

यहाँ मेरी नमूना शैली पत्र

$bg-img: url('/img/bg.jpg'); 

.show { 
    position: relative; 
    background: $black $bg-img center center; 
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    overflow: hidden; 
} 

एक तरीका यह है कि समस्या को स्पष्ट रूप से छवि की आवश्यकता की जाएगी हल और फिर घटकों प्रतिक्रिया के लिए इनलाइन शैली बनाने के लिए है।

img1 = document.createElement("img"); 
img1.src = require("./image.png"); 

लेकिन मैं अपने छवि फ़ोल्डर जैसे ही मेरी शैली पत्र भार से प्रत्येक छवि अलग से की आवश्यकता द्वारा नहीं लोड सभी छवियों करना चाहते हैं।

मेरे webpack कॉन्फ़िग फ़ाइल

module.exports = { 
    devtool: 'source-map', 
    entry: { 
    main: [ 
     'webpack-dev-server/client?http://localhost:8080', 
     'webpack/hot/only-dev-server', 
     './src/index.js' 
    ] 
    }, 
    output: { 
    path: path.join(__dirname, 'public'), 
    publicPath: '/public/', 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     include: path.join(__dirname, 'src'), 
     loader: 'react-hot!babel' 
     }, 
     { 
     test: /\.scss$/, 
     include: path.join(__dirname, 'sass'), 
     loaders: ["style", "css?sourceMap", "sass?sourceMap"] 
     }, 
     { 
     test: /\.(png|jpg)$/, 
     include: path.join(__dirname, 'img'), 
     loader: 'url-loader?limit=10000' 
    } // inline base64 URLs for <=10k images, direct URLs for the rest 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

मैं कुछ तुच्छ अंक गायब हो सकता है है। किसी भी मदद की सराहना की है।

Answer 1

आह .... मैं अंत में इस मुद्दे को पाया है डिबगिंग की एक लंबी घंटे के बाद। यह मेरी मूर्खता थी जिसके कारण मैंने संघर्ष किया था। मैं इस सवाल को हटाना चाहता था, लेकिन सोचा कि यह मेरे जैसे नए कॉमर्स की मदद करेगा जब इसी तरह के मुद्दों पर अटक जाएंगे।

समस्या यहाँ

loader: 'url-loader?limit=10000'

था मैं वास्तव में जानते हुए भी कि वह क्या करता बिना 10kb के आकार दायर करने के लिए सीमा निर्धारित की गई थी। और जिस छवि को मैं लोड कर रहा था वह आकार 21kb था! यह तब होता है जब आप किसी और वेबपैक कॉन्फ़िगरेशन फ़ाइलों की प्रतिलिपि बनाते हैं :) जावास्क्रिप्ट थकान का संकेत!

Answer 2

अपने सीएसएस और संपत्तियों को एक्सेस करने के लिए वेबपैक का उपयोग करते समय, आपके सीएसएस को आपके जावास्क्रिप्ट import या require कॉल में उपयोग किए जाने वाले समान मॉड्यूल नामकरण नियमों का पालन करने की आवश्यकता होती है।

img फ़ोल्डर मान लिया जाये कि अपने स्रोत पेड़ की जड़ में है, तो आप एससीएसएस में इस तरह का संदर्भ लेना चाहिए:

// note there is no leading /, which tells "require()" to start from the root of your source tree 
$bg-img: url('img/bg.jpg'); 

या बस पूरी तरह से रिश्तेदार जाना। आप अपने स्रोत कोड मान लिया जाये कि इस तरह है:

/src/styles.scss 
/img/bg.jpg 

आपका styles.scss एक रिश्तेदार पथ इस्तेमाल कर सकते हैं:

// note the path is relative to where the style.scss is in your source tree. 
$bg-img: url('../img/bg.jpg'); 

Answer 3

मुझे इसी तरह की समस्या थी लेकिन '.jpeg' एक्सटेंशन वाली छवियों के साथ। '.jpg' में एक्सटेंशन को बदलने से मुझे किसी कारण से मदद मिली।