将样式组件与反应和故事书一起使用时未加载字体

Question

我正在构建基于 React、Typescript 的应用程序，并在 Webpack 上构建。所以基本上在使用 webpack 或 webpack-dev-server 时一切正常。但后来我想使用故事书，我想把一些字体放在我的项目目录中。在 sotrybook 中我看不到我的字体，它们出于某种原因不工作——我认为这可能与 webpack 相关。

我正在使用它来加载字体：

//globalStyle.ts
import { createGlobalStyle } from "styled-components";
import bender from "../resources/fonts/Bender.otf";

const GlobalStyle = createGlobalStyle`
@font-face {
    font-family: 'Bender';
    src: url(${bender});
    font-weight: 400;
    font-style: normal;
}

所以在代码中使用它作为 <GlobalStyle/> 默认的 webpack 构建是有效的。但是为了对每个故事书组件应用效果，我使用了这个装饰器：

import * as React from "react";
import GlobalStyle from "../src/styles/globalStyle";
import mainTheme from "../src/styles/mainTheme";
import { ThemeProvider } from "styled-components";
import { configure, addDecorator } from "@storybook/react";

const req = require.context("../src/", true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

const withGlobal = storyFn => {
  return (
    <ThemeProvider theme={mainTheme}>
      <GlobalStyle />
      {storyFn()}
    </ThemeProvider>
  );
};

addDecorator(withGlobal);
configure(loadStories, module);

转到故事书检查器，我看到样式已加载，但查看 @font-face 字段时，我看到类似

的内容

@font-face {
src: url()
/**/
}

所以font的URL是空的。我尝试在我的代码中将此 import 替换为 require(_path_) 并且 src: url() 已填充，但此地址下没有文件。

我正在使用自定义故事书 webpack 配置：

const path = require('path');

module.exports = {
    stories: ['../src/**/*.stories.tsx'],
    addons: ['@storybook/preset-typescript'],
    webpackFinal: async config => {
        config.module.rules.push(
            {
                test: /\.(ts|tsx)$/,
                use:
                    [
                        { loader: require.resolve('ts-loader') },
                        { loader: require.resolve('react-docgen-typescript-loader') },
                    ],
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg|otf)$/,
                use: [
                    {
                        loader: require.resolve('url-loader'),
                    },
                ],
            },
        );
        config.output.publicPath = "http://localhost:9001/"
        config.resolve.extensions.push('.js', '.jsx', '.ts', '.tsx');
        return config;
    },
}

Answer 1

我遇到了类似的问题，因为我的字体没有被下载，所以我将字体 link 添加到 .storybook 文件夹内的文件 preview-head.html。

勾选https://storybook.js.org/docs/configurations/add-custom-head-tags/

将样式组件与反应和故事书一起使用时未加载字体

Font is not loading when using styled-components with react and storybook

css

reactjs

webpack

storybook