带有SCSS的背景图像无法正常工作 - `webpackMissingModule`错误

我使用带有Webpack的SCSS。我有一个div，我想填充背景图片。当我硬编码的HTML：带有SCSS的背景图像无法正常工作 - `webpackMissingModule`错误

<div class="plus-icon" 
    style="background-image: url('graphics/plus-icon.png');"> 
</div>

一切正常，但是当我尝试通过SCSS设置它这样的：

.plus-icon { 
    background-image: url('graphics/plus-icon.png'); 
}

我得到了这样的错误：

Uncaught Error: Cannot find module "./graphics/plus-icon.png" 
> webpackMissingModule @ 

/* ... */ 

./~/css-loader!./~/sass-loader!./src/stylesheets/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' 
./graphics/plus-icon.png in /home/karol/GitProjects/monterail-test/src/stylesheets 
resolve file 
/home/karol/GitProjects/monterail-test/src/stylesheets/graphics/plus-icon.png 
doesn't exist 

/* ... */

由于我们可以看到，Webpack试图过早加载我的PNG并错误地解释给定的路径。

我该如何解决？

来源

2017-02-09 Karol Selak

你见过这个解决方案吗？ http://stackoverflow.com/questions/38834508/webpack-not-loading-background-image –

谢谢 - 但这并不能解决我的问题。我不想在编译时链接到我的图片，只是让它像CSS解释那样工作正常。 –

当我将我的图标副本添加到位置'stylesheets/graphics/plus-icon.png'时，我在解释过程中遇到了另一个奇怪的错误：'./src/stylesheets/graphics/plus-icon.png中的错误 Module parse失败：/home/karol/GitProjects/monterail-test/src/stylesheets/graphics/plus-icon.png意外字符' '（1：0）您可能需要一个合适的加载程序来处理此文件类型。 SyntaxError：意外字符' '（1：0） ' –

您需要使其相对于SCSS文件的路径，而不是相对于您的HTML文件。

来源

2017-08-21 16:22:14 limawebdev

一个小例子可能会有所帮助。 – GhostCat

带有SCSS的背景图像无法正常工作 - `webpackMissingModule`错误

回答

相关问题