将 @fontface 添加到 Storybook

Question

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

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

Answer 1

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

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

检查上面的答案的链接:)