如何配置 webpack 以将自定义字体加载到故事书中?
Posted
技术标签:
【中文标题】如何配置 webpack 以将自定义字体加载到故事书中?【英文标题】:How to config webpack to load custom fonts into storybook? 【发布时间】:2020-05-27 20:34:16 【问题描述】:我是 webpack 的新手,我正在尝试按照本教程 https://medium.com/@mushti_dev/hey-e6faa20b910a 将自定义字体加载到 stroybook v4 中
工作区结构如下所示(create-react-app + storybook)
my-project/
.storybook
config.js
preview-hrad.html
webpack.config.js
fonts
MyCustomFont.woff
src
components
Title.js
containers
styles
MyCustomFont.woff
index.js
stories
从src的styles文件夹加载字体时,配置如下:
webpack.config.js
const path = require('path');
module.exports = async ( config ) =>
// fonts
config.module.rules.push(
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: [
loader: 'file-loader',
query:
name: '[name].[ext]',
],
include: path.resolve(__dirname, '../')
);
return config;
;
preview-head.html
<style type="text/css">
@font-face
font-family: 'MyCustomFont';
src: url('styles/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
</style>
Title.js
import React from 'react';
const Title = ( title ) =>
return (
<div>
<h2 style=fontFamily: 'MyCustomFont'>title</h2>
</div>
);
;
export default Title;
我的问题是如何从 fonts 文件夹 加载 MyCustomFont.woff ?
我尝试用 name: 'fonts/[name].[ext]',
更新 webpack 配置,用 src: url('fonts/MyCustomFont.woff') format('woff');
更新 css 样式,但我很难匹配正确的字体路径。
【问题讨论】:
【参考方案1】:我刚刚在storybook v6.1
遇到了这个问题,然后意识到实际上有两个字体区域需要设置:
preview-head.html
中的组件预览字体)
storybook 仪表板字体(manager-head.html
中的仪表板导航字体)
复制我做了什么:
preview-head.html
并重命名为manager-head.html
确保在@font-face
中指定的字体url 相对于在npm 脚本中使用-s
指定的静态文件夹路径
我没有更改main.js
中的 webpack 配置
我的文件夹结构
|- .storybook/
|- ...
|- preview-head.html
|- manager-head.html
|- src/
|- ...
|- fonts/
|- font-name.otf
preview-head.html
和manager-head.html
<style type="text/css">
@font-face
font-family: 'font-name';
src: url('fonts/font-name.otf') format('opentype');
...
</style>
package.json
...
"scripts":
...
"storybook": "start-storybook ... -s ./src",
"build-storybook": "build-storybook -s ./src"
【讨论】:
如果我使用 create-react-app,这个建议会改变吗?因为我无法让它工作。还检查了github.com/mydatahack/mdh-design-system-storybook-typescript,但还不能让它工作。 @AlexisDuran 在你的*-head.html
文件中你可以尝试这样的事情:<style type="text/css"> @font-face font-family: 'Lato'; src: url('fonts/Lato-Thin.ttf') format('truetype'); ... </style>
然后在你的package.json
你应该有"storybook": "start-storybook -p 6006 -s ./src"
和"build-storybook": "build-storybook -p 6006 -s ./src"
我最终使用 S3 分配我的字体,然后一切顺利。希望您或我的回答将来能对某人有所帮助!以上是关于如何配置 webpack 以将自定义字体加载到故事书中?的主要内容,如果未能解决你的问题,请参考以下文章
无法将自定义字体加载到 OSX 项目中,但是......我进入了 iOS 项目?