我试图将某些字体内联为base64编码的Data URI,但是Webpack的url-loader却没有运气。这很奇怪,因为url-loader似乎只是针对我的图像和svg文件这样做。我的设置如下:
目录结构
root/
|-src/
|--assets/
|
|----fonts/
| icon-fonts/
| fontawesome.woff2
|
|----styles/
| fonts.css
|
|--components/
| main.component.js
|...
Run Code Online (Sandbox Code Playgroud)
webpack.config.js
module: {
loaders: [
{
test: /\.(jpg|png|svg|woff2)$/,
exclude: /node_modules/,
loader: 'url?limit=100000&name=[name]-[sha512:hash:base64:7].[ext]'
},
]
}
Run Code Online (Sandbox Code Playgroud)
fonts.css
@font-face {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
src: url('../fonts/icon-fonts/fontawesome.woff2') format('woff2');
}
Run Code Online (Sandbox Code Playgroud)
main.component.js
import fonts from '../assets/styles/fonts.css'
import React from 'react'
export class App extends React.Component {
...
}
Run Code Online (Sandbox Code Playgroud)
输出