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.