将@fontface 添加到故事书

Posted 2023-02-19

【中文标题】将@fontface 添加到故事书

【英文标题】：Add @fontface to Storybook

【发布时间】：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>

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

【问题讨论】：

这里有一个答案可能对您有所帮助：***.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",

【参考方案1】：

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

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

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