Я использую
@font-face {
font-family: 'Roboto-Thin';
src: url("../Fonts/Roboto-Thin.ttf");
}
в своем CSS-файле для импорта шрифта.Работает нормально в React в браузере.Когда я строю реактивный проект, а затем компилирую его с помощью электрона, шрифт не отображается.
В моих файлах JS для ссылки на актив, который я использую, требуется, например:
src={require("../images/stop.svg")}
Я сделалследующее, потому что я не хотел извлекать реакцию по порядку для редактирования путей в конфигурации веб-пакета (электронные пути основаны на файлах):
const WEB_FOLDER = '../build';
const PROTOCOL = 'file';
electron.protocol.interceptFileProtocol(PROTOCOL, (request, callback) => {
// // Strip protocol
let url = request.url.substr(PROTOCOL.length + 1);
// Build complete path for node require function
url = path.join(__dirname, WEB_FOLDER, url);
// Replace backslashes by forward slashes (windows)
// url = url.replace(/\\/g, '/');
url = path.normalize(url);
console.log(url);
callback({path: url});
});
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: 'index.html',
protocol: PROTOCOL + ':',
slashes: true
});
Это работает для всего, кроме моего импорта CSS.Как я могу использовать CSS
src: url("../Fonts/Roboto-Thin.ttf");
и по-прежнему получать правильный путь в электроне, все еще работая в браузере?Помните, что я не хочу использовать реагирование, поэтому я не могу редактировать веб-пакет напрямую.