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
Liam Scott is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.