Support tilde ~ in Sass Transformer

[limonte]

🙋 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

[DeMoorJasper]

We can support this again, however it's pretty weird that we would deviate from the standard resolver especially for sass.

Maybe this should be configurable in sassrc or something not sure yet how to solve this. This is custom syntax though.

In Parcel 1 we supported way too much custom and weird syntaxes that has been cleaned up/normalised in Parcel 2.

[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.

[toresbe]

This is also preventing me from upgrading to parcel 2, as I need to use in-house style libraries which use tilde paths to reference across other modules with npm dependencies.

[rutger1140]

Same here.

Long time Parcel 1 user and this prevents me from going Parcel 2. Even with a very minimal setup (parcel 2.0.0-beta.2) these all don't work when using @import outside of the main import file. (from main.scss using @import "~... does work)

Hope someone can point me in the right direction for this seemingly very basic importing of scss files... 🤔

With ~

@import "~bootstrap/scss/functions";

🚨 Build failed.
@parcel/transformer-sass: The @import path "~bootstrap/scss/functions" is using webpack specific syntax, which isn't supported by Parcel.

To @import files from node_modules, use "bootstrap/scss/functions"
  ╷
8 │ @import "~bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^

Without ~

@import "bootstrap/scss/functions";

🚨 Build failed.
@parcel/transformer-sass: Failed to resolve 'bootstrap/scss/functions' from './src/assets/styles/common/\\\\\\_common.scss'
  ╷
8 │ @import "./bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

With node_modules/ prefixed

@import "node_modules/bootstrap/scss/functions";

🚨 Build failed.
@parcel/transformer-sass: Failed to resolve 'node\\\\\\_modules/bootstrap/scss/functions' from './src/assets/styles/common/\\\\\\_common.scss'
  ╷
8 │ @import "node_modules/bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

Only thing that works seems to be @import "../../../../node_modules/bootstrap/scss/functions"; which is kinda ugly.

[devongovett]

FYI tilde imports are deprecated in webpack as well... https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules

[rb-ntnx]

Even after the closure of this, I am still facing the issue:

#6607 (comment)

Can someone guide me here ?

[YqxLzx]

and then , how to relsove this issue

We can support this again, however it's pretty weird that we would deviate from the standard resolver especially for sass.

Maybe this should be configurable in sassrc or something not sure yet how to solve this. This is custom syntax though.

In Parcel 1 we supported way too much custom and weird syntaxes that has been cleaned up/normalised in Parcel 2.

if other third-party libraries use "~" what help