0

在我的 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>

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

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

4

1 回答 1

0

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

于 2020-07-29T21:51:14.293 回答