我试图将某些字体内联为base64编码的Data 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]' }, ] }
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 { ... }
输出