小编Tyl*_*itz的帖子

带URL加载器的Webpack内联字体

我试图将某些字体内联为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)

输出

输出

urlloader data-uri webpack

5
推荐指数
1
解决办法
2924
查看次数

标签 统计

data-uri ×1

urlloader ×1

webpack ×1