Support tilde ~ in Sass Transformer

🙋 feature request

Support the @import '~path/to/styles.scss' syntax.

🤔 Expected Behavior

It should resolved from node_modules, it was working this way in Parcel v1.

😯 Current Behavior

Error: The @import path "~path/to/styles" is using webpack specific syntax, which isn't supported by Parcel.

To @import files from node_modules, use "path/to/styles"

The error message is actually incorrect. The tilde syntax is not only from Webpack, VScode also supports it: here’s the demo:

💁 Possible Solution

Add the tilde ~ support.

🔦 Context

https://github.com/sweetalert2/sweetalert2-parcel-demo/blob/master/styles.scss

[limonte]

Thank you for the prompt response @DeMoorJasper!

This is custom syntax though.

Agree, but it’s widely used, e.g. in packages like https://github.com/sweetalert2/sweetalert2-themes where we

// 1. import default variables from the npm peer dependency
// https://github.com/sweetalert2/sweetalert2/blob/master/src/variables.scss
@import '~sweetalert2/src/variables';

// 2. allow users to override default values
$swal2-background: black;

// 3. import the actual styles which use variables from above, also from the npm peer dependency
@import '~sweetalert2/src/sweetalert2';

Without ~ those files wouldn’t be resolved properly, so ~ is actually the only one way AFAIK for this approach and IMO should be supported by Parcel v2.

[noushad-pp]

I also have the same problem as the underlying library uses the ~ format and thus even though I resolve the file import to absolute path, the file imported has the same issue and parcel compilation is failing.