parcel: Url() without quotes is not supported in sass

According to https://developer.mozilla.org/en-US/docs/Web/CSS/url there are three formats.

div#test {
  background-image: url(./images/test.jpg)
}

{
  "name": "parcel-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html"
  },
  "author": "Dustin Deus",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.2.3",
    "babel-preset-env": "^1.6.1",
    "node-sass": "^4.7.2",
    "postcss-modules": "^1.1.0",
    "uglify-es": "^3.2.2"
  }
}

Exptected behaviour

./images/test.jpg should be in dist folder

Current behaviour

./images/test.jpg is not in dist folder

Parcel: 1.2.0 Windows 10

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 34 (17 by maintainers)

Most upvoted comments

Hello, I’m the node-sass maintainer. Happy to help whenever I we can regarding Sass issues. I don’t fully grok what’s happening here, still very new to parcel. Happy to answer any specific questions.

xzyfer on Dec 18, 2017

Apologies I thought I had responded here. I looked into a solution in Sass but it’s not possible without breaking language compatibility.

There is an issue to track official support for this feature: https://github.com/sass/dart-sass/issues/195

xzyfer on Aug 24, 2018

This is still broken.
Any update?

TimNZ on Apr 3, 2018

My gut feeling is that a url custom function should work, and the working behaviour is a bug. (still need to confirm)

For reference this is some prior work regarding an official implementation on how to do this in https://github.com/sass/libsass/issues/532. It was largely put on ice once https://github.com/sass-eyeglass/eyeglass came up with a solution that was good enough.

Recently there has some been renewed discussion on formalising an approach to support custom url loaders in modern Sass engines, but it’s early days still.

xzyfer on Dec 18, 2017

Thanks. To clarify these two cases shouldn’t act differently, however I’m not sure at the moment what the correct behaviour is. Specifically I’m not sure if url is a function that should be able to be overridden with custom functions because this could have knock on affects to custom importers i.e. @import url('foo').

I’ll need to confirm what we expect to happen when I’m back home.

xzyfer on Dec 18, 2017