Merge pull request #494 from BeAPI/fix/node-modules-import

Enhance SCSS imports and update loaders configuration to support package-style imports

Author: cedric07

config/loaders.js

@@ -92,6 +92,8 @@ module.exports = {
 								let obj = {
 									quietDeps: true,
 									sourceMap: true,
+									// Resolve package-style imports (e.g. @fontsource-variable/...) like Node does
+									loadPaths: [nodeModulesPath],
 								}
 
 								if (isProduction && isEditor(loaderContext)) {

src/scss/03-base/_fonts.scss

@@ -17,20 +17,20 @@
  *
  *      2 - Declare font-face :
  *          // For Classic font
- *          @use "../../../node_modules/@fontsource-utils/scss/src/mixins" as fontsource;
- *          @use "../../../node_modules/@fontsource/myFont/scss/mixins" as MyFont;
+ *          @use "@fontsource-utils/scss/src/mixins" as fontsource;
+ *          @use "@fontsource/myFont/scss/mixins" as MyFont;
  *          @include fontsource.faces($metadata: MyFont.$metadata, $weights: (400, 700));
  *          ...
  *
  *          // For Variable font
- *          @use "../../../node_modules/@fontsource-utils/scss/src/mixins" as fontsource;
- *          @use "../../../node_modules/@fontsource-variable/myFont/scss/mixins" as MyFont;
+ *          @use "@fontsource-utils/scss/src/mixins" as fontsource;
+ *          @use "@fontsource-variable/myFont/scss/mixins" as MyFont;
  *          @include fontsource.faces($metadata: MyFont.$metadata, $axes: wght);
  *          ...
  */
 
-@use "../../../node_modules/@fontsource-utils/scss/src/mixins" as fontsource;
-@use "../../../node_modules/@fontsource/poppins/scss/mixins" as Poppins;
+@use "@fontsource-utils/scss/src/mixins" as fontsource;
+@use "@fontsource/poppins/scss/mixins" as Poppins;
 
 @include fontsource.faces($metadata: Poppins.$metadata, $weights: (300, 400, 500, 700), $styles: normal);
 @include fontsource.faces($metadata: Poppins.$metadata, $weights: (300, 400, 500, 700), $styles: italic);