Электрон: Как разрешить CSS URL в продукт? - PullRequest
0 голосов
/ 14 января 2020

Я хочу запустить приложение Angular с Electron на основе этого примера на моем Raspberry Pi. Приложение хорошо работает на моем P C с npm start, но оно не может разрешить ресурсы на Pi.

Активы определены в файле theme.scss в каталоге src/:

$body-background-color: white;
$body-background-image: url("/assets/images/bg-hexa-gray-flat.png");
$body-background-position: top left;
$body-background-repeat: repeat;

$sidepanel-background-color: white;
$sidepanel-background-image: url("/assets/images/bg-hexa-red-flat.png");
$sidepanel-background-position: top left;
$sidepanel-background-repeat: repeat;

$sidepanel-logo:       url("/assets/svg/logo.svg");
$sidepanel-logo-white: url("/assets/svg/white.svg");

, и этот файл импортируется в большинство моих компонентов.

Мой main.ts файл:

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';

let win: BrowserWindow = null;
const serve = process.argv.slice(1).some(val => val === '--serve');

const createWindow = async () => {

  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 480,
    icon: path.join(__dirname, 'src/assets/images/icon.png'),
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: (serve) ? true : false,
    },
  });

  if (serve) {
    require('electron-reload')(__dirname, {
      electron: require(`${__dirname}/node_modules/electron`)
    });
    win.loadURL('http://localhost:4200');
  } else {
    win.setFullScreen(true);
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'dist/index.html'),
      protocol: 'file:',
      slashes: true
    }));
  }

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store window
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });

  return win;
};

try {

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', createWindow);

  // Quit when all windows are closed.
  app.on('window-all-closed', () => app.quit());

} catch (e) {
  // Catch Error
  // throw e;
}

Проблема в том, что с serve на моем P C путь /assets относится к root приложения (http://localhost: 4200 / assets /...) и работает нормально, но в результате я получаю ошибку file:///assets/... не найдено. Если я изменю пути в CSS пакета на моем Pi с /assets/... на assets/..., это сработает. Если я изменю его соответственно в файле theme.scss, он не скомпилируется, потому что путь относительный и theme.scss импортируется во многие компоненты на разных уровнях дерева файлов.

Я уже пробовал пути вроде ~/assets/..., но он скомпилирован как /./assets/..., и это не имеет смысла для меня ...

Как я могу сделать /assets стать assets/ в пакете CSS или сделать assets/ разрешаться относительно приложения root во время компиляции?

Редактировать:

Разрешение активов в url() является старой проблемой Angular.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...