我正在尝试将一些字体内联为 base64 编码的数据 URI,但我对 Webpack 的 url-loader 没有什么运气。这很奇怪,因为 url-loader 似乎只是为我的图像和 svg 文件执行此操作。我的设置如下:
目录结构
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]'
},
]
}
字体.css
@font-face {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
src: url('../fonts/icon-fonts/fontawesome.woff2') format('woff2');
}
主要组件.js
import fonts from '../assets/styles/fonts.css'
import React from 'react'
export class App extends React.Component {
...
}
output
不确定 url-loader 是否能够内联字体,但我的猜测不是。您可以使用Base64 内联加载器 https://www.npmjs.com/package/base64-inline-loader以此目的。
NOTE:
显示的示例对我不起作用,因为它无论如何都会导出文件。
{
test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: 'base64-inline-loader?limit=1000&name=[name].[ext]'
}
然而,当我从规则中删除名字后,它就像一个魅力
{
test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: 'base64-inline-loader'
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)