Add @fontface to 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;
};

在preview-head.html (inside .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文件。我删除了它，但改变了我在包中的路径。Json从public到。/src

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

查看上面的链接答案:)

Answer 2

我的问题是，我在我的App.tsx上导入了我的@font-face {...}规则，而不是在我的故事书配置中，这在preview.js文件中表示。

解决方案是在preview.js中导入我的css @font-face规则(如果你没有这个文件，你应该创建它的引用)

//preview.jsfile

import 'scss/myFontsDeclaration.css';
...

//myFontsDeclaration.css

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
src: url('../assets/fonts/GoogleFonts/Roboto-Bold.ttf');
}
....

Answer 3

通过Storybook Configuration提供静态文件

我们建议通过Storybook提供静态文件，以确保你的组件总是拥有它们需要加载的资源。我们建议将此技术用于组件经常使用的资产，如徽标、字体和图标。

配置一个目录(或一个目录列表)，当你启动Storybook时，你的资产在其中。使用主Storybook配置文件中的staticDirs配置元素(即.storybook/main.js)来指定目录:

// .storybook/main.js
module.exports = {
stories: [],
addons: [],
staticDirs: ['../public'],
};

这里../public是你的静态目录。

你也可以传递一个目录列表，以逗号分隔，不带空格。

staticDirs: ['../public', '../static']

或者甚至使用一个配置对象来定义目录:

staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }]

---

[⚠️已弃用]通过Storybook CLI提供静态文件

不赞成在Storybook CLI中使用--static-dir或-s选项。建议使用Storybook静态目录配置选项。但对于旧版本或参考:

sb init脚本在我们的package.json中创建两个故事书脚本。更新两者以服务于公共目录(保存Fonts和Next.js图像的地方)。我们使用的CLI选项是-s或--static-dir。

// package.json
"scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "start-storybook -p 6006 -s ./public",
+    "build-storybook": "build-storybook -s public"
}

在我们的CLI选项文档中找到更多CLI选项。并通过Storybook了解更多关于提供静态文件的信息。

---

阅读更多:开始使用Storybook和Next.js ByMichael Chan图片、字体和资源ByStorybook Docs