将@fontface 添加到 Storybook

Question

我有一个在 create-react-app 中创建的故事书，我想给它添加一个字体。我的组件使用 css 模块（也许这是有用的信息）。

所以，我在 .storybook 中创建了一个 webpack.config.js，它看起来像这样：


module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    use: [
      {
        loader: 'file-loader',
        query: {
          name: '[name].[ext]',
        },
      },
    ],
    include: path.resolve(__dirname, '../'),
  });

  return config;
};

在预览中-head.html（在 .storybook 中）我有

<style>
    @font-face {
      font-family: 'WalsheimPro';
      font-style: normal;
      font-weight: 400;
      src: url('shared/fonts/GTWalsheimProMedium.ttf') format('truetype');
    }
</style>

我的字体不起作用，知道为什么吗？您还需要其他信息来帮助我吗？谢谢:)

Answer 1

好的，所以我不需要 webpack.config.js 文件。我删除了它，但将 package.json 中的路径从 public 更改为 ./src

    "storybook": "start-storybook -p 6006 -s ./src",
    "build-storybook": "build-storybook -s ./src",

查看上面的答案以获得链接:)

将@fontface 添加到 Storybook

Add @fontface to Storybook

fonts

font-face

storybook