PostCSS / Webpack not loading image in stylesheet

Question

I'm not sure if this is a PostCSS problem or a Webpack problem.

Here's my relevant image handler in my webpack config:

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

Here's my huge chain of postcss modules:

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

And here's my entry and output

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

Here's my calling reference in css

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

I can't figure out the proper combination of settings to reference an image in my css (footer-mountains.png) and have that loaded via the webpack dev option (aka from ram) - I see the proper hashfilename transfiguration but somehow I am missing a load path or something. I'm rather confused on the topic. Appreciate any insight.

Here's the full package I am using if it helps: https://github.com/koistya/react-static-boilerplate

Answer 1

I found that an absolute path was needed to show images when sourcemaps were on. eg:

publicPath: 'http://localhost:5000/', // absolute path req here for images in css to work with sourcemaps on. Must be actual numeric ip to access accross lan (eg testing devices).