Fixing relative url() imports in Scss

[aquinahealth]

I've encountered a problem resolving fonts and images when attempting to define my own custom theme and and layout as specified at https://www.primefaces.org/ultima-ng/#/documentation. However, any attempt to place the custom theme and custom layout scss files in any location other than "src/assets/theme" and "src/assets/layout/css" results in broken url resolution for fonts and images when I attempt to build my angular project. Is it possible to override urls for fonts/images in the project or will I have to live with my theme and layout being mixed in with template styles.

Example error:

ERROR in ./src/_styles/custom-layout-aquina.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/_styles/custom-layout-aquina.scss)
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Repos\aquina\Source\AquinaHealth.Web.Angular\src\assets\sass\_fonts.scss:11:7: Can't resolve '../fonts/roboto-v15-latin-300.ttf' in 'C:\Repos\aquina\Source\AquinaHealth.Web.Angular\src\_styles'
9 | url("../fonts/roboto-v15-latin-300.woff2") format('woff2'), /* Super Modern Browsers */
10 | url("../fonts/roboto-v15-latin-300.woff") format('woff'), /* Modern Browsers */
> 11 | url("../fonts/roboto-v15-latin-300.ttf") format('truetype'), /* Safari, Android, iOS */
| ^
12 | url("../fonts/roboto-v15-latin-300.svg#Roboto") format('svg'); /* Legacy iOS */

Directory structure:
| styles.scss
+---assets
| | .gitkeep
| |
| +---demo
| | +---data
| | | cars-large.json
| | | cars-medium.json
| | | cars-small.json
| | | countries.json
| | | files.json
| | | filesystem.json
| | | scheduleevents.json
| | |
| | \---images //unchanged
| |
| |
| +---layout
| | +---css//unchanged
| | | layout-blue-grey.css, etc.
| | |
| | +---fonts //unchanged
| | |
| | \---images//unchanged
| |
| +---pages
| | 404.html
| | access.html
| | error.html
| | jquery.js
| | landing.html
| | login.html
| | primeng.min.css
| |
| +---sass//unchanged
| \---theme//unchanged

|
+---environments
| environment.prod.ts
| environment.ts
|
\---_styles
| custom-layout-aquina.scss
| custom-theme-aquina.scss
|
\---fonts//attempted to redefine font urls: didn't work
fonts.scss
material-icons.scss
roboto-font.scss

config info:
angular.json

"styles": [
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/primeng.min.css",
"src/_styles/custom-theme-aquina.scss",
"src/_styles/custom-layout-aquina.scss",
"src/_styles/fonts.scss",
"src/styles.scss"

[cagatay.civici]

If you customize the locations, then you need to change the relative paths as well on your side.