为开发和生产设置CSS文件中的不同字体URL(Webpack)

以下是我在Chrome扩展中嵌入Nunito字体的方式:

manifest.json:

// more code
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "css": ["style.css"],
        "js": ["content.js"]
    }
],
// more code
"web_accessible_resources": [
    {
        "resources": ["*.ttf"],
        "matches": ["<all_urls>"]
    }
]

样式表 :

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    src: url('chrome-extension://__MSG_@@extension_id__/fonts/Nunito-Medium.ttf');
}

当我编译我的扩展并将其加载到Chrome中时,字体被成功嵌入。但是,当我在中开发扩展时 localhost ,我收到此错误:

未能加载资源:net::ERR_Failed

我认为这是因为 本地服务器 无法解释 chrome-extension://__MSG_@@extension_id__ ,所以当我在 本地服务器 。

但正如您在上面看到的,字体的路径是在CSS文件中硬编码的( style.css )。所以我不能改变这条路。有办法解决这个问题吗?

注意:我正在使用Webpack:

软件包.json :

"scripts": {
  "dev": "webpack --watch --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
},