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

Posted

技术标签:

【中文标题】将样式组件与反应和故事书一起使用时未加载字体【英文标题】:Font is not loading when using styled-components with react and storybook 【发布时间】:2020-05-15 12:26:03 【问题描述】:

我正在构建基于 React、Typescript 的应用程序并基于 Webpack 构建。所以基本上在使用webpackwebpack-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()
/**/

所以字体的 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;
    ,

【问题讨论】:

您可以在您的globalStyle.ts 中控制台登录$bender 吗?另外,为什么不直接设置@font-face url 而不是src: url($bender); @eMontielG 试过了,结果是undefined 你这是什么意思?像那样src: $benderBlack;? 我的意思是src: url(../resources/fonts/Bender.otf); 好的,基本上我已经将我的资源文件夹移到了src 之外的public。然后应用它。它在 Storybook 和 webpack-dev-server 中工作。谢谢你指点我。 【参考方案1】:

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

查看https://storybook.js.org/docs/configurations/add-custom-head-tags/

【讨论】:

以上是关于将样式组件与反应和故事书一起使用时未加载字体的主要内容,如果未能解决你的问题,请参考以下文章

Jest / Storyshots测试组件中的响应元素

如何在故事书中配置 webpack 以允许 babel 在项目文件夹之外导入反应组件

故事书:对象不是 Twig 组件上的函数

为啥 vue-loader 不能与故事书一起使用?

有没有办法将 postcss 与样式组件一起使用?

样式化组件 + 故事书:当我传递新样式时,SVG 图标不会重新渲染