如何配置 webpack 以将自定义字体加载到故事书中? [英] How to config webpack to load custom fonts into storybook?

查看：32
本文介绍了如何配置 webpack 以将自定义字体加载到故事书中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 webpack 的新手，我正在尝试按照本教程将自定义字体加载到 stroybook v4 https://medium.com/@mushti_dev/hey-e6faa20b910a

工作区结构如下(create-react-app + storybook)

my-project/.故事书配置文件预览-hrad.htmlwebpack.config.js字体我的自定义字体.woff源文件成分标题.js集装箱样式我的自定义字体.woff索引.js故事

从src中styles文件夹加载字体时，配置如下:

webpack.config.js

const path = require('path');module.exports = async ({ config }) =>{//字体config.module.rules.push({测试:/\.(png|woff|woff2|eot|ttf|svg)$/,用: [{加载器:'文件加载器'，询问: {name: '[name].[ext]',}}],包括: path.resolve(__dirname, '../')});返回配置；};

预览-head.html