从blob_loaded stylesheet加载本地webfonts

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

问题在style-loader的README中描述:

关于使用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;
}