Reputation: 73
I'm building app based on React, Typescript with build on Webpack. So basically everything is working ok when using webpack
or webpack-dev-server
. But then I wanted to use storybook, and I want to put some fonts that are inside my project directory. And in sotrybook I can't see my fonts, they're not working for some reason - I think that could be webpack related.
I'm using this to load fonts:
//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;
}
So using this in code as <GlobalStyle/>
with default webpack build is working. But to apply the effect for each story-book component I use this decorator:
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);
Going to the story-book inspector I see that style has loaded, but looking at @font-face
fields i see something like
@font-face {
src: url()
/**/
}
So the URL of font is empty. I tried replacing in my code this import
to require(_path_)
and the src: url()
was filled but then no file under this address.
I am using custom storybook webpack config:
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;
},
}
Upvotes: 3
Views: 6452
Reputation: 479
I had a similar issue because my font wasn't being downloaded so I added the font link to a file preview-head.html
inside .storybook
folder.
Check https://storybook.js.org/docs/configurations/add-custom-head-tags/
Upvotes: 3