I have an Angular 17 project which is acting as a test project so I can build and test components from an Angular library which will get built and used amongst various other projects.

My folder structure is as follows:

node_modules -> @design-system -> assets -> fonts  
                                  css -> design-system.css  
                                  src -> _variables.scss
                                      -> fonts -> _poppins.scss

projects -> my-lib -> components -> button  
ng-package.json

src  
angular.json  
package.json

_variables.scss

@import './fonts/poppins';
@import './fonts/opensans';

/* Grey shades */
$gray-2: #fafafa !default;
$gray-4: #f5f5f5 !default;
$gray-8: #ebebeb !default;
$gray-10: #e6e6e6 !default;
$gray-20: #cccccc !default;
$gray-30: #b3b3b3 !default;
$gray-40: #999999 !default;
$gray-70: #4d4d4d !default;
$gray-90: #1a1a1a !default;

./fonts/poppins


@font-face {
   font-display: swap;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 100;
   src: url("../assets/fonts/Poppins/woff2/Poppins-100-normal-latin-ext.woff2") format('woff2'), url("../assets/fonts/Poppins/ttf/Poppins-100-normal.ttf") format('ttf');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
   font-display: swap;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 200;
   src: url("../assets/fonts/Poppins/woff2/Poppins-200-normal-latin-ext.woff2") format('woff2'), url("../assets/fonts/Poppins/ttf/Poppins-200-normal.ttf") format('ttf');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

button.scss


@use "@design-system/src/variables" as v;

h2 {
  color: v.$gray-70;
}

and then run ng build my-lib, I get the following error:

✖ Compiling with Angular sources in Ivy partial compilation mode.
Build failed with 71 errors:
<stdin>:8:11: ERROR: [plugin: angular-css-resource] Could not resolve “../assets/fonts/Poppins/woff2/Poppins-100-normal-latin-ext.woff2”

The error is relating to an import inside the variables.scss which is importing the fonts which are inside the assets folder within the design-system node_module. I can serve the project locally and have access to the variables locally. But ng build is not working, any help is greatly appreciated

If I comment out the import within the component then the library builds as expected, but if I can the import back in then the error returns as the error is within the node_modules not being able to find the correct assets