问题描述
我正试图将某些字体内联为base64编码的Data URI,但Webpack的url-loader却没有运气.这很奇怪,因为url-loader似乎只是对我的图像和svg文件这样做.我的设置如下:
I’m trying to inline some fonts as base64-encoded Data URI’s but am having no luck with Webpack’s url-loader. Which is weird because the url-loader seems to be doing just that for my image and svg files. My setup is below:
目录结构
root/
|-src/
|--assets/
|
|----fonts/
| icon-fonts/
| fontawesome.woff2
|
|----styles/
| fonts.css
|
|--components/
| main.component.js
|...
webpack.config.js
module: {
loaders: [
{
test: /\.(jpg|png|svg|woff2)$/,
exclude: /node_modules/,
loader: 'url?limit=100000&name=[name]-[sha512:hash:base64:7].[ext]'
},
]
}
fonts.css
@font-face {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
src: url('../fonts/icon-fonts/fontawesome.woff2') format('woff2');
}
main.component.js
import fonts from '../assets/styles/fonts.css'
import React from 'react'
export class App extends React.Component {
...
}
输出
推荐答案
不确定url-loader是否可以内联字体,但我猜不是.为此,您可以使用 base64-inline-loader .
Not sure if url-loader is able to inline fonts, but my guess is not. You can use base64-inline-loader for this purpose.
注意:
所示示例对我不起作用,因为它始终会导出文件.
Shown example didn't work for me because it exports files anyway.
{
test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: 'base64-inline-loader?limit=1000&name=[name].[ext]'
}
但是,一旦我从规则中删除名称,它就像魅力一样
however soon as I removed name from rule it works like a charm
{
test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: 'base64-inline-loader'
}
这篇关于带有url-loader的Webpack内联字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!