Webpack can'；t在远程托管的网页包包中加载字体

摩纳哥编辑器对某些图标使用

codicon.ttf

字体：

@font-face {
    font-family: "codicon";
    src: url(./codicon.ttf) format("truetype");
}

不幸的是，这个路径是不可配置的，在我的例子中，它导致404错误

我已经创建了一个集成了monaco editor的应用程序/库。所有内容都通过Webpack进行捆绑，

my app.bundle.js

托管在远程服务器上：

https://server.com/my-app.bundle.js

+

https://server.com/resources/codicon.ttf

当有人使用我的库并将其包含在自己的HTML页面（

）中时，库会尝试访问本地计算机上的

codicon.ttf

：

http://localhost:8080/codicon.ttf

但实际上它必须从远程服务器加载：

https://server.com/resources/codicon.ttf

我在想办法解决这个问题。我想：

使用Webpack设置绝对路径而不是相对路径。我不知道该怎么做

将codicon.ttf放入bundle my-app.bundle.js。看起来这是可能的（），但是需要更改第三方css（编辑器中的css）

以某种方式覆盖编辑器css并在那里设置绝对路径。我不确定

---

我的想法对吗？也许这是摩纳哥编辑的问题，必须由他们来解决？

我找到了两种解决问题的方法

使用Webpack将绝对路径设置为字体

重写编辑器的css样式

在应用程序的css文件中添加以下样式（不在第三方样式表文件中）：

并将以下规则添加到网页包配置中，以避免从编辑器css文件加载字体文件：

{
    test: /codicon\.ttf$/,
    use: [{
        loader: "ignore-loader"
    }]
}

---

我很好奇为什么你真的想加载密码图标字体。摩纳哥已经包括它，你可以在你的代码中使用它。是的，摩纳哥包括它。但是，当您将应用程序开发为第三方库（存在的JS包和带有codicon字体的资源）并允许从CDN使用时，它会尝试从客户端而不是从CDN加载codicon字体。因此，有必要以远程加载codicon.ttf的方式绑定库，而不仅仅是“/codicon.ttf”路径。

@font-face {
    font-family: 'codicon';
    src: url('https://server.com/resources/codicon.ttf') format('truetype');
}

{
    test: /codicon\.ttf$/,
    use: [{
        loader: "ignore-loader"
    }]
}