vue-cli webpack sass背景图片无法解析答案

【问题标题】：vue-cli webpack sass backgorund image cant be resolvedvue-cli webpack sass背景图片无法解析
【发布时间】：2020-11-18 20:40:34
【问题描述】：

在我的 Vue 应用程序中，我将 SCSS 文件导入到 App.vue，如下所示：

<style lang="scss">
  @import "@/assets/styles/main.scss";
</style>

在我的main.scss 文件中，我有：

background: url(../images/image.png);

当我运行 yarn build 时，我收到以下错误：

ModuleNotFoundError: Module not found: Error: Can't resolve '../images/image.png' in '/var/www/project/src'

我尝试将 url(./images/image.png); 更改为 url(~/images/image.png); 并且错误几乎相同 - 只是图像的路径不同，例如； '../../../../../../images/image.png

我尝试安装 resolve-url-loader - 没有帮助。

我的文件结构是：

.
├── public
│   ├── favicon.iso
│   └── index.html
└── src
    ├── assets
    │   ├── styles
    │   │   └── main.scss
    │   └── images
    │       └── image.png
    ├── main.js
    └── App.vue

我做错了什么？

更新我试图将 background: url(../images/image.png); 移到 sass 文件之外，现在看起来像

<style lang="scss">
    body {
      background: url("assets/images/FILE1180_1600.JPG");
    }
  @import "@/assets/styles/main.scss";
</style>

另外，我尝试了以./ 和~ 和@ 开头的路径，其中混合了少数几种，有时错误是无法解决，有时错误是ModuleParseError: Module parse failed: Unexpected character '�' (1:0)

花了一整天的时间寻找解决方案，看起来我尝试了我在互联网上找到的所有不同的解决方案，但仍然不适合我...... :(

【问题讨论】：

对我来说最奇怪的是这就是为什么url(~/images/image.png); 会导致像'../../../../../../images/image.png 这样的路径

标签： node.js webpack yarnpkg vue-cli-4

【解决方案1】：

哦，问题出在图像名称中，我仍然不确定到底是什么，但是当我将其重命名为 backgroun.jpg 时，它开始工作......可能是一些编码问题...... 但是，它只有在 sass 文件之外才有效，否则 webpack 找不到它

【讨论】：