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

我发现打开源地图时需要使用绝对路径来显示图像。例如：

publicPath: 'http://localhost:5000/', // 这里的绝对路径要求 css 中的图像与源映射一起使用。必须是实际的数字 IP 才能跨局域网访问（例如测试设备）。