PostCSS/Webpack lädt kein Bild im Stylesheet

Question

Ich bin mir nicht sicher, ob dies ein PostCSS-Problem oder ein Webpack-Problem ist.

Hier ist mein relevantes Bild Handler in meinem webpack config:

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

Hier ist meine große Kette von postcss Module:

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')(), 
    ]; 
} 

Und hier ist mein Eintrag und Ausgang

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

Hier meine Anrufreferenz in css

Ich kann nicht die richtige Kombination von Einstellungen herauszufinden, um ein Bild in meinem css (footer-mountains.png) zu verweisen und dass über die webpack dev Option (aka von ram) geladen haben - ich die richtigen hashfilename sehen Verklärung, aber irgendwie fehlt mir ein Lastweg oder so etwas. Ich bin ziemlich verwirrt über das Thema. Schätze jeden Einblick.

Hier ist das komplette Paket ich verwende, wenn es hilft: https://github.com/koistya/react-static-boilerplate

Answer 1

Ich fand, dass ein absoluter Pfad benötigt wurde Bilder zu zeigen, wenn sourcemaps auf waren. zB:

publicPath: 'http://localhost:5000/', // absoluter Pfad req hier für Bilder in CSS, die mit Quellkarten funktionieren. Es muss eine gültige numerische IP-Adresse sein, um auf das LAN zugreifen zu können (zB Testgeräte).