Unable to Resolve Stylesheet Import with "~" Prefix

We encountered a build issue related to resolving stylesheet imports prefixed with "~" in our project. We are using latest version of Payload and Vite as our build tool.

The error is encountered in file colourPicker.scss

// here we got an error
@import "~payload/scss";
// removing the ~ will resolve the error
@import "payload/scss";

The error arises from the Sass compilation process, specifically when attempting to import stylesheets using the prefix: ~. Despite our attempts to manually remove the prefix from the import statements, the issue persists. This is because the prefix: ~ is inherently included in the package dependency, and removing it manually proves ineffective, as it gets reinstated upon updating the backend.

Expected Behavior: The Sass compiler should successfully resolve the stylesheet imports prefixed with "~" without throwing an error.

Actual Behavior: The Sass compiler throws an error stating "Can't find stylesheet to import" due to the inability to resolve imports prefixed with "~".

Additional Information:

It's worth noting that we do not encounter this issue with version "@nouance/payload-better-fields-plugin": "^1.1.0", but only with newer versions.

Environment: Build Tool: Vite Package Manager: Yarn Content Management System: Payload

NouanceLabs / payload-better-fields-plugin

Unable to Resolve Stylesheet Import with "~" Prefix #75