[英]vue-cli webpack sass backgorund image cant be resolved
In my Vue application, I have SCSS file imported to App.vue
like this:在我的 Vue 应用程序中,我将 SCSS 文件导入到App.vue
,如下所示:
<style lang="scss">
@import "@/assets/styles/main.scss";
</style>
In my main.scss
file I have:在我的main.scss
文件中,我有:
background: url(../images/image.png);
When I run yarn build
I'm getting the following error:当我运行yarn build
时,出现以下错误:
ModuleNotFoundError: Module not found: Error: Can't resolve '../images/image.png' in '/var/www/project/src'
I tried to change url(./images/image.png);
我试图改变url(./images/image.png);
to url(~/images/image.png);
到url(~/images/image.png);
and error is pretty much the same - just the path to the image is different, like;并且错误几乎相同 - 只是图像的路径不同,例如; '../../../../../../images/image.png
I tried to install resolve-url-loader
- that did not help.我尝试安装resolve-url-loader
- 但没有帮助。
My file structure is:我的文件结构是:
.
├── public
│ ├── favicon.iso
│ └── index.html
└── src
├── assets
│ ├── styles
│ │ └── main.scss
│ └── images
│ └── image.png
├── main.js
└── App.vue
What am I doing wrong?我究竟做错了什么?
UPDATE I tried to move that background: url(../images/image.png);
更新我试图移动那个background: url(../images/image.png);
outside the sass file and now it looks like在 sass 文件之外,现在看起来像
<style lang="scss">
body {
background: url("assets/images/FILE1180_1600.JPG");
}
@import "@/assets/styles/main.scss";
</style>
also, I tried path starting with ./
with ~
, with @
, with a mix of few of them some times error is that can't resolve and some times the error is ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
另外,我尝试了以./
和~
、 @
开头的路径,其中一些混合使用,有时错误是无法解决,有时错误是ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
Spend the whole day on searching for the solution, looks like I tried all different solution I found on the inte.net and still not working for me.... :(花了一整天的时间寻找解决方案,看起来我尝试了我在 inte.net 上找到的所有不同的解决方案,但仍然不适合我....:(
ooooh, the issue was in the image name, I still not sure what exactly but when I rename it to backgroun.jpg
it starts working... probably some encoding issue... But still, it works only when it's outside of the sass file, otherwise, webpack can't find it哦,问题出在图片名称上,我仍然不确定到底是什么,但是当我将它重命名为backgroun.jpg
时,它开始工作了……可能是一些编码问题……但是,它仍然只在 sass 之外时工作文件,否则webpack找不到
old question, but there is an answer from me to a related question: https://stackoverflow.com/a/70206027/17574822老问题,但我有一个相关问题的答案: https://stackoverflow.com/a/70206027/17574822
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.