Use gulp-sass ^6.0.1 and enable use of NodePackageImporter for Sass' pkg: protocol

[polarbirke]

In version 6.x gulp-sass has updated to using Sass' new JS API (see dlmanning/gulp-sass#846).

This requires small changes where options have changed:

• includePaths loadPaths
• outputStyle style

In addition it is now possible to benefit from pkg: Importers:

No longer will you have to manually add node_modules to your loadPaths option and worry about whether nested packages will work at all. No longer will you need to add ~s to your URLs and give up all portability. Now you can just pass importers: [new NodePackageImporter()] and write @use 'pkg:library' and it’ll work just how you want out of the box.

webfactory-gulp-preset will make this available automatically if the configured compiler (we recommend sass-embedded) supports it. Support landed in Dart Sass v1.71.0; node-sass does not support it and probably never will.

---

Issues

❌ BC break: node-sass is no longer supported

gulp-sass' documentation suggests that version 6.x continues to support node-sass, but this is not true. dlmanning/gulp-sass#846 has switched to using the Sass compiler's internal compile or compileAsync methods which are not supported by node-sass (which only offers the legacy render and renderAsync).

Projects updating webfactory-gulp-preset would be required to migrate to Dart Sass.

⚠️ A curiosity: NodePackageImporter() seems to require entryPointDirectory when used via gulp-sass.

entryPointDirectory should be optional when calling the constructor; however, when using it with gulp-sass errors occur if it is omitted:

Sass Error: www/bundles/app/scss/test.scss
Can't find stylesheet to import.
  ╷
1 │ @use "pkg:foo-bar/style.scss";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  - 1:1  root stylesheet

webfactory-gulp-preset always instantiates the importer with new NodePackageImporter(config.webdir) where config.webdir is the entryPointDirectory; this fixes the issue.