Question

我有这个由WebPack生成的样式表：

@font-face {
  font-family: 'SDC';
  src: url(/fonts/SDC.a1b82464f8ecd3973123e2140c30df02.ttf) format('truetype'), url(/fonts/SDC.af547e8d2b07993c0bc865d8c3746ac0.woff) format('woff'), url(/f68efdf3530391386b071febbff0eae2.svg#SDC) format('svg');
  font-weight: normal;
  font-style: normal;
}

使用以下内容加载到我的应用中：

<link rel="stylesheet" href="blob:http%3A//localhost%3A3000/4ed04ef3-1133-417b-abe4-78501ac193e0">

问题是字体无法加载。我认为问题是打破相对路径的blob网址。

建议？

Answer 1

问题在README of style-loader：

中有所描述

注意源地图支持和用url引用的资产：当样式加载器与？sourceMap选项一起使用时，CSS模块将生成为Blob，因此相对路径不起作用（它们与chrome相关： blob或chrome：devtools）。为了使资产保持正确的路径设置，必须设置webpack配置的output.publicPath属性，以便生成绝对路径。

在您的WebPack配置中，定义output.publicPath以指向您的本地服务器（例如http://localhost:3000/）

它应该是这样的：

output: {
  filename: '[name].js',
  publicPath: 'http://localhost:3000/',
},

现在，所有相对URL都可以转换为绝对URL，即使从blob协议加载也能正常工作。

您的CSS现在将是：

@font-face {
  font-family: 'SDC';
  src: url(http://localhost:3000//fonts/SDC.a1b82464f8ecd3973123e2140c30df02.ttf) format('truetype'), url(http://localhost:3000//fonts/SDC.af547e8d2b07993c0bc865d8c3746ac0.woff) format('woff'), url(http://localhost:3000//f68efdf3530391386b071febbff0eae2.svg#SDC) format('svg');
  font-weight: normal;
  font-style: normal;
}

从blob_loaded stylesheet加载本地webfonts

1 个答案: