Angular Electron打包后自定义SCSS文件资源无法加载的解决方案咨询

核心问题原因 #

开发/Web环境下，/assets/...指向服务器根目录的资源文件夹，能正常访问；但Electron打包后，应用的实际运行路径是resources/app.asar，绝对路径/assets/...会被解析为系统根目录（而非应用根目录），导致资源找不到。而模板中直接引用的assets/xxx能正常加载，是因为Angular的资源打包机制自动处理了这些路径，但SCSS中的url()编译逻辑未适配Electron路径。

方案一：通过SCSS环境变量切换路径（推荐） #

通过定义SCSS变量，区分开发/Web和Electron环境的资源路径，兼顾两种场景的兼容性：

1. 修改Library-1的fonts.scss，引入基础路径变量：

// 默认使用绝对路径（适配开发/Web）
$asset-base-path: "/assets/" !default;

@font-face {
    font-family: "OhBaby";
    src: url("#{$asset-base-path}fonts/OoohBaby-Regular.ttf");
}

2. 在Desktop项目的styles.scss中，根据环境覆盖变量：

// 仅Electron打包时启用相对路径
#if $is-electron {
  $asset-base-path: "./assets/";
}

// 简化@import路径（可选，配合angular.json的includePaths）
@import "fonts.scss";

3. 配置angular.json的Electron构建参数：
   在Desktop项目的build -> configurations下新增electron配置，传递SCSS变量并设置相对base路径：

"configurations": {
  "electron": {
    "stylePreprocessorOptions": {
      "define": {
        "$is-electron": true
      }
    },
    "baseHref": "./"
  }
}

4. 构建Electron版本并打包：
   先用Angular构建适配Electron的版本，再执行electron-packager：

# 构建Desktop项目的Electron版本
ng build desktop --configuration=electron

# 执行打包命令
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"

方案二：动态设置Electron的base标签 #

通过在index.html中动态检测Electron环境，修改base href为应用实际路径，让绝对路径指向正确位置：

1. 修改Desktop项目的index.html，添加动态base标签逻辑：

<head>
  <base href="/">
  <script>
    // 检测是否运行在Electron环境
    if (typeof require !== 'undefined' && require('electron')) {
      const { app } = require('electron').remote;
      const path = require('path');
      // 设置base href为应用的实际根路径
      document.querySelector('base').setAttribute('href', `file://${path.join(app.getAppPath(), '/')}`);
    }
  </script>
</head>

2. 注意Electron权限配置：
   在Electron主进程的BrowserWindow配置中，开启对应权限（Electron 14+需手动启用）：

const mainWindow = new BrowserWindow({
  webPreferences: {
    enableRemoteModule: true,
    contextIsolation: false // 若启用contextIsolation，需通过preload脚本传递路径
  }
});

此方案无需修改SCSS代码，直接通过运行时路径修正解决问题。

方案三：利用Angular资源打包机制处理相对路径 #

调整SCSS中的资源路径为相对路径，让Angular构建器自动处理路径映射：

1. 修改Library-1的fonts.scss路径为相对SCSS文件的路径：

@font-face {
    font-family: "OhBaby";
    // 路径相对于当前fonts.scss文件（library-1/src/styles/fonts.scss）
    src: url("../assets/fonts/OoohBaby-Regular.ttf");
}

2. 配置angular.json的stylePreprocessorOptions，简化@import路径：
   在Desktop项目的build -> options中添加：

"stylePreprocessorOptions": {
  "includePaths": [
    "./projects/library-1/src/styles"
  ]
}

3. 组件中直接导入fonts.scss：

@import "fonts.scss";

Angular构建时会自动将SCSS中相对路径的资源复制到dist目录，并替换为正确的输出路径，同时开发环境下，Angular Dev Server也会解析该路径到library-1的assets目录。

内容的提问来源于stack exchange，提问作者Franco