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(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（脚步器mountains.png）中的图像，并且可以通过WebPack Dev选项（又称RAM）加载该图像 - 我看到了适当的hashfilename Transfiguration，但是不知何故，我缺少一个负载路径或其他东西。我对这个话题感到困惑。感谢任何见解。

这是我使用的完整包：如果有帮助：https://github.com/koistya/reeact-static-boilerplate

Answer 1

我发现，在开启sourcemaps时，需要一个绝对路径来显示图像。例如：

publicPath：'http：//localhost：5000/'，//绝对路径req此处用于CSS中的图像，可以与SourceMaps一起使用。必须是访问Accross LAN的实际数字IP（例如测试设备）。