无法在Angular Electron应用程序中加载自定义.scss文件中的资源

vsnjm48y 于 2023-09-28 发布在 Electron

关注(0)|答案(3)|浏览(187)

我正在使用电子打包机打包我的角形应用程序。但是，当打开打包的应用程序时，从我自定义创建的.scss文件引用的资源无法正确加载，而我的其他资源（直接从库资源文件夹引用）则无法正确加载。
angular项目包含应用程序和库。它具有以下结构

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

Library 1有一个fonts.scss文件，其中引用字体：

字体位于library-1/src/assets/fonts* 中

资产在上图中的资产文件夹中 *

我试图从fonts.scss文件中加载的字体之一：

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

我已经尝试从url路径中删除/，但Web应用程序无法工作，developent中的桌面应用程序无法工作 *
然后使用以下命令打包应用程序：

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\""

如何在组件中引用字体文件：

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

开发中的electron桌面应用程序和我的web应用程序fonts.scss文件中的字体工作正常，但当我打开打包的桌面应用程序时却不正常。
字体不工作时产生的错误？

正确的路径应该包含资源/app.asar/.../在url*
以下是一个有效的资产引用：

assets/images/brands/logo-android.svg

这里是我的angular.json，我在这里输出了我的资产：

"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"
],

资源已正确复制到dist文件夹，如下图所示：

dist/desktop/assets中的文件：

我想要一个解决方案，它不需要我将自定义.scss文件中引用的字体和其他资源移动到library 1的styles.scss文件中。*

我如何告诉打包器或电子使用正确的路径，或者我如何配置Angular使用正确的路径。

electron

来源：https://stackoverflow.com/questions/76780832/unable-to-load-assets-in-custom-scss-file-in-angular-electron-application

3条答案

按热度按时间

crcmnpdw1#

这个问题与Electron如何打包应用程序以及SCSS如何解释资产的路径有关。SCSS不理解Electron应用程序的上下文，它只是将url作为字符串处理并保持原样。当您尝试打包应用程序时，这会导致一个问题，因为路径上下文发生了更改，来自开发服务器的相对路径与生产结构不匹配。
处理此问题的最佳方法是在SCSS文件中使用相对路径而不是绝对路径，并确保字体与Electron应用程序正确绑定。

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

确保在生成过程中将这些字体复制到dist/desktop文件夹。这可以通过在angular.json文件中的assets数组中添加一个节来完成：

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

请确保您的“Electron's BrowserWindow's webPreferences object”配置为使用正确的预加载脚本或启用nodeIntegration：

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

在文件preload.js中，您可以将所需的Electron API暴露给前端。

const { contextBridge } = require('electron')

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

在你的Angular代码中，你可以像这样使用Electron API：

const assetsPath = window.electron.getAssetsPath();

在SCSS中使用字体文件的相对路径应该是可行的，只要这些字体在构建过程中被正确复制。如果它们没有被复制，你需要找到一种方法将它们包含在你的构建输出中。

赞(0）回复(0）举报 2023-09-28

eoigrqb62#

不要使用/assets，只使用assets/。第一个选项意味着assets在根目录中，它可能不在那里。如果您开始乱用base-href命令行参数，这就变得相关了，我怀疑这可能是您的问题的原因。
根据您的评论，我怀疑您可能没有正确地发送您在angular.json文件中提到的资产。
确保你的“architect.build.options”包含了你提到的scss文件。有两个相关部分：

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

如果您将文件包含在assets下，则必须通过相对assets/路径引用这些文件。如果你从其他地方链接到文件本身，这很方便。
如果你将它包含在你的styles下，Angular将捆绑，缩小并内联到index.html下的<style>标签中，然后输出，你不能真正使用<link>标签，因为不会产生.css文件。