PostCSS/Webpackがスタイルシートに画像を読み込まない

Question

PostCSSの問題かWebpackの問題か分かりません。ここで

は私のWebPACKの設定で私の関連画像ハンドラです：

{ 
    test: /\.(png|jpg|jpeg|gif|woff|woff2)$/, 
    loader: 'url-loader?limit=10000', 
}, 
{ 
    test: /\.(eot|ttf|wav|mp3)$/, 
    loader: 'file-loader', 
}, 

ここpostcssモジュールの私の巨大なチェーンです：

postcss(bundler) { 
    return [ 
    // Transfer @import rule by inlining content, e.g. @import 'normalize.css' 
    // https://github.com/postcss/postcss-import 
    require('postcss-import')({ addDependencyTo: bundler }), 
    // Lets you use variables inside of @rules 
    // https://github.com/GitScrum/postcss-at-rules-variables 
    require('postcss-at-rules-variables')(), 
    // Mixins 
    // https://github.com/postcss/postcss-mixins 
    require('postcss-mixins')(), 
    // W3C variables, e.g. :root { --color: red; } div { background: var(--color); } 
    // https://github.com/postcss/postcss-custom-properties 
    require('postcss-custom-properties')({variables: combinedStyles}), 
    // Lost grid 
    // https://github.com/peterramsing/lost 
    require('lost')(), 
    //assets 
    // https://github.com/assetsjs/postcss-assets 
    // require('postcss-assets')({ loadPaths: ['**']}), 
    // W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em); 
    // https://github.com/postcss/postcss-custom-media 
    require('postcss-custom-media')(), 
    // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { } 
    // https://github.com/postcss/postcss-media-minmax 
    require('postcss-media-minmax')(), 
    // W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6; 
    // https://github.com/postcss/postcss-custom-selectors 
    require('postcss-custom-selectors')(), 
    // W3C calc() function, e.g. div { height: calc(100px - 2em); } 
    // https://github.com/postcss/postcss-calc 
    require('postcss-calc')(), 
    // Allows you to nest one style rule inside another 
    // https://github.com/jonathantneal/postcss-nesting 
    require('postcss-nesting')({bubble: ['for']}), 
    // Post css For 
    // https://github.com/antyakushev/postcss-for 
    require('postcss-for')(), 
    // W3C color() function, e.g. div { background: color(red alpha(90%)); } 
    // https://github.com/postcss/postcss-color-function 
    require('postcss-color-function')(), 
    // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); } 
    // https://github.com/iamvdo/pleeease-filters 
    require('pleeease-filters')(), 
    // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; } 
    // https://github.com/robwierzbowski/node-pixrem 
    require('pixrem')(), 
    // W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { } 
    // https://github.com/postcss/postcss-selector-matches 
    require('postcss-selector-matches')(), 
    // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors 
    // https://github.com/postcss/postcss-selector-not 
    require('postcss-selector-not')(), 
    // Add vendor prefixes to CSS rules using values from caniuse.com 
    // https://github.com/postcss/autoprefixer 
    require('autoprefixer')(), 
    ]; 
} 

そして、ここでは私のエントリと出力が

だ

context: path.resolve(__dirname, '../'), 
entry: ['./core/app.js'], 
output: { 
path: path.resolve(__dirname, '../build'), 
publicPath: '/', 
file: 'build/[name].js', 
sourcePrefix: ' ', 
}, 

ここにありますが、 CSSで私の呼び出しの参照

section { 
background: var(--lightBlue); 
padding: var(--base); 
background-image: url('footer-mountains.png'); 
background-size:cover; 
} 

私のcss（footer-mountains.png）のイメージを参照するための適切な設定の組み合わせを見つけられず、webpackのdevオプション（別名ramから）でロードされた設定を見つけることができません - 適切なhashfilename何らかの形でロードパスなどが欠落しています。私はその話題についてむしろ混乱しています。任意の洞察力を賞賛してください。

は、ここでそれが助け場合、私が使用しています完全なパッケージです： https://github.com/koistya/react-static-boilerplate

Answer 1

は、私は絶対パスがsourcemapsが上だったときの画像を表示するために必要だったことがわかりました。例：

publicPath： 'http://localhost:5000/'、//ソースマップを使用して作業するcssの画像の絶対パスはここにあります。 accross lanにアクセスするには実際の数値ipでなければなりません（例えば、テストデバイス）。