Webpack

Question

साथ संपूर्ण url() सीएसएस में पृष्ठभूमि छवियों के लिए पथ नहीं लगाया जा सका मैं निम्नलिखित Webpack config (मोटे तौर पर, यह इस पोस्ट के लिए सरलीकृत किया गया है) है:

const rootPublic = path.resolve('./public'); 
const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]'; 
const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}`; 
const SASS_LOADER = 'sass?sourceMap&includePaths[]=' + path.resolve(__dirname, './src/styles'); 

// ... loaders: 

loaders: [ 
    { 
    test: /\.(jpe?g|png|gif|svg)$/, 
    loader: 'url-loader?limit=10000&name=[path][name].[ext]' 
    }, 
    { 
    test: /\.scss$/, 
    loader: config.DEVELOPMENT_MODE ? `style!${CSS_LOADER}!autoprefixer!${SASS_LOADER}` 
       : ExtractTextPlugin.extract('style', `${CSS_LOADER}!autoprefixer!${SASS_LOADER}`) 
    }, // ... 
] 

अब इस छवियों के लिए पूरी तरह से ठीक काम करता है एससीएसएस फ़ाइलों में सामान्य रूप से संदर्भित:

0:

.some-static-class { 
    background: url('/images/bg.png'); 
} 

हालांकि, यह जब :local निर्देशों का उपयोग नहीं काम करता है

और मुझे लगता है कि ऐसा इसलिए है क्योंकि root सीएसएस लोडर के लिए परिभाषित किया गया है। मुझे एक बिल्ड त्रुटि मिलती है: Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif

यदि मैं css-loader config से root हटा देता हूं, तो यह ठीक बनाता है लेकिन फिर पथ क्रोम के इंस्पेक्टर में "दिखता है" सही है, लेकिन जब आप वास्तव में एक नए टैब में लिंक खोलते हैं , यह इंगित करता है: chrome-devtools://devtools/bundled/"/images/bg.png" जो स्पष्ट रूप से सही ढंग से हल नहीं करता है।

मुझे यकीन नहीं है कि समस्या url-loader कॉन्फ़िगरेशन के साथ है, या वास्तव में क्या चल रहा है।

मैंने resol.root, resol.modulesDirectories, आदि निर्दिष्ट करने के लिए विभिन्न वेबपैक कॉन्फ़िगरेशन के साथ खेला, लेकिन पूरी तरह से यह सुनिश्चित नहीं है कि उनके पास कोई प्रभाव हो रहा है या यदि मैं बस इसके बारे में पूरी तरह गलत हूं। मैं resolve-url-loader पर भी आया लेकिन यह सुनिश्चित नहीं है कि मुझे यह भी चाहिए कि मुझे क्या चाहिए।

कोई विचार? MTIA!

अद्यतन

मैं नोट करना चाहिए, कि यह सफारी में ठीक काम करता है, लेकिन नहीं क्रोम में। तो यह क्रोम-विशिष्ट बग की तरह लगता है, लेकिन सफारी में हमारे सभी विकास करना व्यावहारिक नहीं है।

मैं भी vue-style-loader पर आया, जो शैली-लोडर का एक कांटा है जो इस समस्या को ठीक करने का दावा करता है, लेकिन जिस तरह से इसे ठीक करता है वह एक हैकी बहिष्कृत भागने/अनदेस्केप विधि पर निर्भर करता है।

Answer 1

एक संभव समाधान पीछा कर रहा था कि मैं के साथ आ सकता है:

उपयोग resolve-url-loader (sass-loader के तुरंत बाद):

:

style!${CSS_LOADER}!autoprefixer!resolve-url!${SASS_LOADER} 

फिर, स्थिर चित्र के लिए एक resolve.alias को परिभाषित

resolve: { 
    alias: { 
    images: path.join(__dirname, 'public/images') 
    } 
} 

और फिर सीएसएस में, आप इस तरह की छवियों को इंगित कर सकते हैं:

:local .SomeClass { 
    background: url('images/bg.png'); 
} 

अपने URL संरचना के आधार पर, आप भी url-loader नाम परम बदलाव करने की आवश्यकता हो सकती:

{ 
    test: /\.(jpe?g|png|gif|svg)$/, 
    loader: 'url-loader?limit=10000&name=images/[name].[ext]' 
} 

---

तो मैं हो, तो इस समस्या को हल करने के लिए एक क्लीनर रास्ता पता नहीं है, लेकिन वह है सबसे अच्छा मैं अब तक आ सकता है। मैं किसी भी प्रतिक्रिया या विकल्प का स्वागत करेंगे।

धन्यवाद!

अद्यतन 6/30/2016

जानने के कुछ पीआर के बाहर है कि इस मुद्दे के समाधान होता है, लेकिन देखभाल करने वाले समाधान पसंद सीएसएस एएसटी में के बजाय सीएसएस लोडर में होने की ...

https://github.com/webpack/style-loader/pull/124 https://github.com/webpack/style-loader/pull/96

यहाँ उम्मीद कर रहा है एक असली ठीक जल्द ही होता है ...

Answer 2

webpack 2 के साथ:

आपकी .scss फ़ाइलों में ~ पथ से पहले ~ उपयोग करें। webpack से संकल्प जड़ की

.yourClass { 
     background: url('~img/wallpaper.png'); 
} 

उपयोग करें, अपने webpack.config.js से जोड़ें:

resolve: { 
     modules: [ 
      path.resolve(root), 
      'node_modules' 
     ] 
    }, 

यह @import, जैसे @import "~ otherfile.scss के लिए भी काम करना चाहिए "