Unable to load assets in custom .scss file in Angular Electron application

I am packaging my angular application using electron packager. However, when opening the packaged application then the assets referenced from my custom created .scss files does not load correctly whilst my other assets (referenced directly from the libraries assets folder) loads correctly.

The angular project contains applications and libraries. It has the following structure

Root
  --> Projects
    --> Desktop
    --> Web
    --> Library-1
    --> Library-2

Library 1 has a fonts.scss file which REFERENCES the fonts:

fonts are in library-1/src/assets/fonts

The assets is in the assets folder in the above picture

One of the fonts I am trying to load from the fonts.scss file:

@font-face {
    font-family: "OhBaby";
    src: url("/assets/fonts/OoohBaby-Regular.ttf");
}

I have tried removing the / from the url path, but then the Web app doesn't work and the desktop application in developent doesnt work

Then I package the application with the following command:

electron-packager ./dist/desktop MyAppName --overwrite --asar --platform=win32 --arch=x64 --icon=projects/desktop/src/assets/logo-accent.ico --prune=true --out=dist --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"MyAppName\""

How I reference the fonts file in a component:

@import "../../../../../Library-1/src/styles/fonts.scss";

The desktop appplication with electron in development and my web application the fonts from the fonts.scss file works correctly, but not when I open the packaged desktop application.

The error that is produced for a font that is not working?

The correct path should contain resources/app.asar/.../ in the url

Here is an asset reference that work:

assets/images/brands/logo-android.svg

Here are my angular.json where I ouput my assets:

"assets": [
    "projects/desktop/src/favicon.ico",
    "projects/desktop/src/assets",
    {
        "glob": "**/*",
        "input": "./projects/library-1/src/assets",
        "output": "/assets/"
    }
],
"styles": [
    "projects/desktop/src/styles.scss"
],

The assets are copied over correctly to the dist folder as seen in this image:

files in dist/desktop/assets:

I would like a solution that does not require me to move my fonts and other assets referenced in custom .scss files to the styles.scss file of library1.

How can I tell the packager or electron to use the correct paths or how can I configure Angular to use the correct paths.

The issue is related to how Electron packages the application and how SCSS interprets the paths for assets. SCSS doesn't understand the context of the Electron app, it merely processes the url as a string and leaves it as-is. This causes an issue when you try to package the application because the path context changes, the relative paths from the development server do not match up with the production structure.

The best way to handle this problem is to use relative paths in your SCSS file instead of absolute paths, and to ensure that the fonts are being bundled correctly with the Electron app.

@font-face {
    font-family: "OhBaby";
    src: url("./assets/fonts/OoohBaby-Regular.ttf");
}

Ensure that these fonts are copied to the dist/desktop folder during the build process. This can be done by adding a section to the assets array in the angular.json file:

"assets": [
    "src/favicon.ico",
    "src/assets",
    { "glob": "**/*", "input": "projects/Library-1/src/assets/fonts", "output": "/assets/fonts" }
]

Make sure your "Electron's BrowserWindow's webPreferences object" is configured to use the correct preload script or to enable nodeIntegration:

const mainWindow = new BrowserWindow({
    webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration: true,
        contextIsolation: false,
    },
});

In the file preload.js, you can then expose the required Electron API to your front-end.

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld(
    'electron',
    {
        getAssetsPath: () => {
            return process.resourcesPath + '/app.asar/';
        }
    }
)

In your Angular code, you can then use this Electron API like:

const assetsPath = window.electron.getAssetsPath();

Using relative paths for font files in your SCSS should work as long as those fonts are being copied over correctly during the build process. If they're not being copied, you will need to find a way to include them in your build output...

Don't use /assets use just assets/. The first option implies that assets is in the root and it might not be there. That becomes relevant if you start messing with the base-href command line argument and I suspect it might be the cause of your problems.

Given your comment I suspect that perhaps you're not properly shipping the assets you've mentioned under your angular.json file.

Make sure that your "architect.build.options" include your scss files you're mentioning. There are two sections that are relevant:

"assets": […],
"styles": […] 

If you include your files under assets you have to reference the files through the relative assets/ paths. This is handy if you're linking to the file itself from other places.

If you include it under your styles Angular will bundle, minify and inline into a <style> tag under the index.html that will be outputted and you cannot really use <link> tags as there'll be no .css file produced.

Replace the / with a ^ when referencing an asset in a scss or css file.

e.g.

"^assets/fonts/OoohBaby-Regular.ttf"