I'm facing an issue with loading an SVG icon inside a SCSS file in an Angular 19 project that's deployed as a Salesforce Static Resource. In my SCSS file, I'm using this: content: url(/vx-grid-assets/icons/indeterminate-box.svg); This works only during development, but when deployed to Salesforce, it doesn't resolve the full path correctly. Instead, it tries to load: http://saas-power-4087-dev-ed--c.scratch.container.force.com/vx-grid-assets/icons/indeterminate-box.svg But because this is served as a static resource, it actually needs to be a relative path. So I need it to resolve like: content: url(./vx-grid-assets/icons/indeterminate-box.svg); However, if I use: content: url(vx-grid-assets/icons/indeterminate-box.svg); content: url(./vx-grid-assets/icons/indeterminate-box.svg); content: url("vx-grid-assets/icons/indeterminate-box.svg"); content: url("./vx-grid-assets/icons/indeterminate-box.svg"); I get compilation errors from Angular. My assets are configured in angular.json like this: { "glob": "**/*", "input": "./common-libraries/vx-grid/vx-grid-resources/assets", "output": "vx-grid-assets" } So the assets are copied correctly and available at runtime under vx-grid-assets/, but I can't reference them properly in SCSS without getting build errors. Has anyone found a reliable way to make SCSS asset URLs work correctly in this setup? Continue reading...
