Parcel: In the vue single file, the background image can't resolve in correct

[c690554125]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

// package.json
{
  "dependencies": {
    "vue": "^2.5.16",
    "vue-hot-reload-api": "^2.3.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^1.0.0",
    "less": "^3.0.1",
    "vue-template-compiler": "^2.5.16"
  }
}

😯 Current Behavior

the error is:

× D:\wamp\www\business_act\optimization\sign\src\components\lottery\lottery.vue:19:3: Cannot resolve dependency './837f73d90a4994df09pg' at 'D:\wamp\www\business_act\optimization\sign\src\components\lottery\837f73d90a4994df0988adc369cba6eb.jpg'
at Resolver.resolve (C:\Users\Administrator\Application Data\npm\node_modules\parcel-bundler\src\Resolver.js:76:17)

💁 Possible Solution

I create the image file '837f73d90a4994df0988adc369cba6eb.jpg' by myself in the path of D:\wamp\www\business_act\optimization\sign\src\components\lottery\837f73d90a4994df0988adc369cba6eb.jpg

then i can run in browser in correct

🔦 Context

💻 Code Sample

the construction:
lottery(a folder)
--lottery.vue
--lottery_bg.jpg

// lottery.vue
<template>
  <div class="child-page">

  </div>
</template>
<script>
  export default {

  }
</script>
<style lang="less" scoped>
  @import '../../common/css/base.less';
  @import '../../common/css/mixin.less';
  .child-page{
    background-image: url('./lottery_bg.jpg'); // this img can't be resolved
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    span{
      color: #fff;
      vertical-align: middle;
    }
  }
</style>

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.7.0
| Node | 8.9.3
| npm/Yarn | 5.5.1
| Operating System | windows x64

[PeachScript]

Hello @DeMoorJasper , any temporary solution or update for this?

[DeMoorJasper]

Unfortunately not @PeachScript I'll look into it soonish. In theory it should work though

[PeachScript]

@DeMoorJasper I tried to debug it in the source code of Parcel, and get some informations hope can help you:

1. I found the VueAsset will collect the same picture twice times, the first time is the original picture, such as ./assets/images/test.png, and the second time is the hashed picture, such as ./ew8ger34g9k2ln3.png;
2. I found the SASSAsset will resolve the picture once time, then the CSSAsset will resolve again, if I disabled process of the CSSAsset, it will works properly.

I'm still trying to fix it, and I will comment here if have any progress.

[PierBover]

Another weird thing is that the hash seems to be correct, but the path is wrong as Parcel is looking for the image in the components folder.

When I use background-image in a .scss file it works as expected.

[areyouse7en]

I got the same problem. when I use background:url(xxxx)

[areyouse7en]

I find that the feasible way to use bgimage in scss is
```scss
background:url(./a.jpg)

 not
 ```scss
 background:url("./a.jpg")

so just don't use the quotation marks.

[c690554125]

@areyouse7en I used your way in my project, it's not working. I use less, not sass. --!

[areyouse7en]

@c690554125 真是个悲伤的故事。。。试试把less文件通过src的方式引用呢？ 感觉是loader的问题

[luikore]

Seems in vue file, the CSSAsset is called after SASSAsset while for SASS file it is not called

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[Pwuts]

Having the same problem with SCSS and CSS in single file components.