将@fontface 添加到故事书答案

【问题标题】：Add @fontface to Storybook将@fontface 添加到故事书
【发布时间】：2021-12-06 08:58:30
【问题描述】：

我在 create-react-app 中创建了一个 Storybook，我想为其添加一个字体。我的组件正在使用 css-modules（也许这是有用的信息）。

所以，我在 .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;
};

在 preview-head.html（在 .storybook 内）我有

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

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

【问题讨论】：

这里有一个答案可能对您有所帮助：stackoverflow.com/questions/60185735/… 您可能还使用了不正确或无法访问的 src 路径。故事书文档在这里有一些关于相对路径的信息：storybook.js.org/docs/react/configure/images-and-assets
谢谢！它只需将路径更改为 ./src 而不是 public :) "storybook": "start-storybook -p 6006 -s ./src", "build-storybook": "build-storybook -s ./src",

标签： fonts font-face storybook

【解决方案1】：

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

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

检查上面的答案以获取链接:)

【讨论】：