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：＆＃39; http://localhost:5000/＆＃39;，//这里的绝对路径请求用于css中用于处理源图的图像。必须是实际数字ip才能访问lan（例如测试设备）。

PostCSS / Webpack未在样式表中加载图像

1 个答案: