Question

我正在使用Webpack，这是我第一次使用它。我已经对这个问题进行了大量的挖掘，但似乎所有我能找到的都是分散的信息，因为这些加载器的根本原因都是不同的。

无论如何，我正在努力通过文件加载器提取我的资产。我正在使用锅炉板，Kriasoft的React Starter Kit。它使用webpack作为捆绑包。

这是文件结构的图像：http://grab.by/NqqA

目前，我将我的图像存储在公共文件夹/ public / images中。我在我的src / components /文件夹中使用postCSS，并在样式表中通过./public/images/title.jpg引用图像。

当我保存并构建应用程序时，图像会被转码但不会加载。

示例，/ src / component / header / header.scss中的header.scss尝试将图像作为背景提取：

Header.scss

@import '../variables.scss';

$brand-color: #61dafb;

.header {
    background: url('./public/images/inverse.jpg') no-repeat 0 0;
    padding: 1.5px;
    margin: 0 auto;
    width: 100%;
}

应用程序构建完成后，会将public assets文件夹复制到build文件夹中。该图像在chrome检查器中具有此路径：http://grab.by/Nqrq

然而，Webpack并不了解如何使用它们。我目前正在使用React Starter Kit repo中的webpack.config.js文件，可在此处查看：

https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js

我无法弄清楚这里发生了什么，我在他们的支持线程上阅读的很多问题涉及源加载器，尽管我没有看到类似于我的问题。

如果有人有任何建议，我会非常感激，我也相信其他人也会这样。

由于

WebPack - 资产和图像在样式表

0 个答案: