如何配置 webpack 将自定义字体加载到故事书中？

Question

我是 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

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

预览-head.html

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;
};

标题.js

<style type="text/css">
  @font-face {
    font-family: 'MyCustomFont';
    src: url('styles/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
</style>

我的问题是如何从字体文件夹加载 MyCustomFont.woff ？

我尝试更新 webpack 配置和 name: 'fonts/[name].[ext]',css 样式src: url('fonts/MyCustomFont.woff') format('woff');，但我很难匹配正确的字体路径。

Answer 1

我刚刚遇到这个问题storybook v6.1，然后意识到实际上有两个字体区域需要设置：

• iframe 预览字体（组件预览字体preview-head.html）
• 故事书仪表板字体（仪表板导航字体manager-head.html）

我做了什么：

• 复制并重preview-head.html命名为manager-head.html
• 确保指定的字体 url@font-face相对于 npm 脚本中指定的静态文件夹路径-s
• 我没有更改 webpack 配置main.js

我的文件夹结构

|- .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"
  }
}