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

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!

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

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

I’m also having this problem and can’t tell from this thread if there’s a viable work around? Wanting to use self hosted fonts can’t be that unusual.

@petrmiko thanks .lessrc works for me.

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?

I’m also running into this issue attempting to import fonts from NPM packages. I can import the SASS file for the font definition, but the paths to the actual font files (woff, ttf, etc) can’t be resolved.

@parcel/core: Failed to resolve '../webfonts/fa-regular-400.woff2' from 
'./styles/main.scss'

This is rather frustrating. I can include the pre-built CSS files in my index.html like:

<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-pro/css/regular.min.css" type="text/css">

But that means I can’t do anything to customize the way that file is compiled, such as change $fa-css-prefix or any of the other configurable options this package makes available. And when you include the pre-built CSS file, Parcel has no issue finding those resources and copying them to dist and such, but for SASS it seems to just get lost.

is this issue resolved? I’m having the same problem. I tried @mukhammed3’s resolution but that doesn’t work for me. I also tried using ‘~’ at the beginning of my url but same issue occurs. The compiled url in my css file by sass is the same as if it was in my home.scss file. Here is my folder structure:

|- css
    styles.css   //background-image:url('./../../src/images/background.png')
    styles.css.map
|- sass
 |-- pages
      home.scss        // background-image:url('./../../src/images/background.png')
|- src
 |-- images
      background.png
index.html  <link rel="stylesheet" href="css/styles.css">

as you can see here my styles.css is referencing the background.png like in my home.scss. It works on my page but when I use Parcel it detects the wrong path of my background.png from my css file.

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)

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 🤔

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)