如何配置 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 遇到了这个问题,然后意识到实际上有两个字体区域需要设置:

iframe 预览字体(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.htmlmanager-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 文件中你可以尝试这样的事情:&lt;style type="text/css"&gt; @font-face font-family: 'Lato'; src: url('fonts/Lato-Thin.ttf') format('truetype'); ... &lt;/style&gt; 然后在你的package.json 你应该有"storybook": "start-storybook -p 6006 -s ./src""build-storybook": "build-storybook -p 6006 -s ./src" 我最终使用 S3 分配我的字体,然后一切顺利。希望您或我的回答将来能对某人有所帮助!

以上是关于如何配置 webpack 以将自定义字体加载到故事书中?的主要内容,如果未能解决你的问题,请参考以下文章

无法将自定义字体加载到 OSX 项目中,但是......我进入了 iOS 项目?

如何配置 BIRT 报告引擎直接从类路径加载字体?

如何在 PowerShell 中运行 appCmd 以将自定义标头添加到默认网站

使用 webpacker 加载字体和图像

将自定义视图动态添加到 iOS 中的每个视图控制器

将样式组件与反应和故事书一起使用时未加载字体