Parcel: Relative path images of SASS @import is not supported

[jpuncle]

Choose one: this is a 🐛 bug report.

💻 Code Sample

main.scss

@import '../components/topbar/index.scss';

topbar/index.scss

.topbar {
  height: 60px;
  background: #f60 url("./play.png") repeat;
  font-size: 2em;
}

🤔 Expected Behavior

main.css

.topbar {
  height: 60px;
  background: #f60 url("md5xxxxxxx.png") repeat;
  font-size: 2em;
}

😯 Current Behavior

main.scss: Cannot resolve dependency './play.png'

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.4.1
| Node | 8.6.0
| npm/Yarn | npm
| Operating System | macOS 10.12.6

[breadadams]

Seeing the same issue using vue's <style lang="css">...</style> within a .vue component.

[spion]

I have experimental support for relativeUrls for SASS in my fork https://github.com/spion/parcel (by adding "relativeUrls": true in .sassrc. Its really hacky though due to https://github.com/sass/node-sass/issues/2223

Will try submitting a PR once I have tests... but in the meantime, just wondering, anyone has an idea about a better way to do this?

[breadadams]

I've been getting around it _importing_ media, ie:

import audio from './song.mp3'
import bgImage from './bg_image.jpg'
import someLogo from './logo.png'

And then inserting those where necessary with js. Not sure if that's of any help @spion

[daoket]

try this way
import './main.scss' // main.js

[PierBover]

I'm having a similar issue with Vue. Not sure if related to this one.

In my main index.scss I can use relative URLs just fine. First import in main.js like this import css from './scss/index.scss'; and then this works:

body {
    background-image: url('../assets/test.jpg');
}

However, when trying to do the same from inside a component I cannot get the image to display from CSS.

So this works when trying to reach the image in the template of the Vue component:

<img src="../assets/test.jpg">

But this doesn't work:

<style lang="scss" scoped>
#App {
    background-image: url('../assets/test.jpg');
}
</style>

And I get this error in the browser:

GET http://localhost:1234/assets/test.jpg 404 (Not Found)

Edit: Sorry for polluting this issue.

I was using parcel-plugin-vue. I removed it and now I'm getting the same problem as @jpuncle with the error Cannot resolve dependency when referencing images from the CSS in the Vue components.

[zhiyan]

I use *.scss file also produce the same problem, the path of image file can not be found correctly

[petrmiko]

For less I am using .lessrc file in project root with content

{ relativeUrls: true, }
Until I did that (by trial and error), I faced the same issue with relative path to a image. Maybe the same could help you (if there's something like .sassrc)

[DeMoorJasper]

I think there isn't really a clean way of achieving this. (After looking through the tracking issue on node-sass and some PRs that should help resolve this)
@spion probably has the currently best solution to this issue, unfortunately.

[dongyuwei]

@petrmiko thanks .lessrc works for me.

[rambo-panda]

like https://github.com/parcel-bundler/parcel/issues/2199

[jussikinnula]

I created an example stating the issue: https://github.com/jussikinnula/sass-url-issue-with-imports

Basically we would need similar as resolve-url-loader either to be implemented in node-sass or as a postcss plugin. The resolve-url-loader does resolve the url()'s by looking the files defined in source map. You can see the produced source maps for example by doing a node-sass or ruby-sass build.

[DeMoorJasper]

@jussikinnula there is a fix for the issue (in this branch https://github.com/spion/parcel) although it's kinda hacky. But nobody has implented it in the master yet.
If anyone wants to, feel free to open a PR with this fix.

SASS currently doesn't support this yet, so this is probably the only way to do this.

[jussikinnula]

@jussikinnula there is a fix for the issue (in this branch https://github.com/spion/parcel) although it's kinda hacky. But nobody has implented it in the master yet.
If anyone wants to, feel free to open a PR with this fix.

SASS currently doesn't support this yet, so this is probably the only way to do this.

Thanks @DeMoorJasper, if I need to use Parcel I'll use that as workaround.

At the moment in project I'm working on I just switched from Parcel to Webpack, and used resolve-url-loader. It's as hacky solution as the one you did. In a sense I like the approach Stylus/LESS have, that there's option to parse relative URLs - so that this kind of hacks are not needed. Definitely fixing SASS would solve the issue with all bundlers (and remove need for resolve-url-loader as well with Webpack).

[DeMoorJasper]

@jussikinnula I didn't make the fix @spion did, and it's also using a very outdated version of Parcel, so I wouldn't recommend it. I however do recommend someone to make a PR with a similar fix

[devniel]

Hello, I had a similar problem with this kind of import

@import '../node_modules/@ibm/plex/scss/ibm-plex.scss';,

got solved by wrapping it with url()

@import url('../node_modules/@ibm/plex/scss/ibm-plex.scss');

Thanks!

[lvkins]

This doesn't only happens for images.

Recently I tried to setup Font Awesome 5 with web fonts.

// main.scss
$fa-font-path: "../../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";

Fonts are being copied to the output directory root, however Parcel fails to resolve a correct path for them.

I'm really confused about Parcel because anything more than basic setup simply doesn't work: CSS modules and now invalid @import paths 🤔

[lvkins]

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.

Don't

[mischnic]

We would need to process url() before SASS is run (similar to https://github.com/bholloway/resolve-url-loader):

• either literally do that
• (or use sourcemaps to find out the original asset of a url statement, but this would break with --no-sourcemaps)