Starting from sass v1.71.0, Sass offers an API called NodePackageImporter to resolve .scss files. For all stylesheets coming from an NPM package, we must use the pkg: prefix to load it. For example pkg:@tuleap/tlp-modal. It has several advantages over the current situation of the default Sass importer:
- It relies on Node resolution and respects
exports field in package.json. This will let us define explicitly which .css or .scss file can be imported by consumers of a given package. This makes the dependencies between our packages more explicit. It lets us drop the "default": <path> rules in exports in favor of "sass" rules. It also lets us drop (in most cases) the special "./style": <path> in exports, because now Sass can understand that we mean to import a stylesheet. It also lets us drop the "style": <path> fields in package.json, we replace it in favor of a single system with exports.
- It moves the file resolution from vite and webpack to Sass. This means more interoperability and fewer "special cases" in our build system.
- It is a bit stricter. When making the change, I had to change some relative paths (
../../../) to pkg paths. It will help us eliminate more hidden cross-package dependencies.