diff --git a/config/loaders.js b/config/loaders.js index b84a777c..ec514115 100644 --- a/config/loaders.js +++ b/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)) { diff --git a/src/scss/03-base/_fonts.scss b/src/scss/03-base/_fonts.scss index 0dbeb1a1..7195c487 100644 --- a/src/scss/03-base/_fonts.scss +++ b/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);