PostCSS/Webpack не загружает изображение в таблицу стилей

Я не уверен, является ли это проблемой PostCSS или проблемой 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) - я вижу правильное преобразование имени хэш-файла, но почему-то я отсутствует путь загрузки или что-то в этом роде. Я немного запутался в теме. Цените любое понимание.

Вот полный пакет, который я использую, если это поможет: https://github.com/koistya/react-static-boilerplate