Question

我正在使用

@font-face {
    font-family: 'Roboto-Thin';
    src: url("../Fonts/Roboto-Thin.ttf");
}

在我的CSS文件中导入字体。它在浏览器的React中运行良好。当我构建react项目然后用电子进行编译时，字体不会呈现。

例如，在我的JS文件中以引用我需要使用的资产

src={require("../images/stop.svg")}

之所以这样做，是因为我不想弹出反应来编辑webpack配置中的路径（电子路径是基于文件的）：

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");

还在浏览器中工作时仍能获得正确的电子路径吗？记住，我不想使用反应弹出，所以我不能直接编辑Webpack。

使用React在生产选择中导入CSS字体

0 个答案: