Я недавно начал использовать сборник рассказов для своего проекта «Реактивная машинопись» и столкнулся с проблемами, приведенными ниже:
- Мои компоненты реакции - bootstrap не имеют стиля. Компоненты загружаются, но без стилей. Я попытался использовать style-loader и css loader в пользовательской конфигурации webpack, но это не сработало.
- Я импортирую некоторые локальные шрифты, но шрифты всегда загружаются внутри Папка шрифтов. Есть ли способ загрузить шрифты в каталог / static / fonts? Я использую загрузчик файлов для загрузки шрифтов.
- У меня есть файл globalStyles.tsx и файл iconStyles.tsx, которые я хотел бы включить глобально в раскадровку iframe. Каков наилучший способ для этого?
Я запускаю сборник рассказов локально на локальном хосте.
Ниже приведен мой основной. js с пользовательской конфигурацией веб-пакета:
module.exports = {
stories: ['../src/stories/**/*.stories.[tj]s','../src/stories/**/*.stories.tsx'],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
webpackFinal: async config => {
config.module.rules.push({
test: /(?<!.*\.test)\.(ts|tsx)$/,
use: [
{
loader: require.resolve('ts-loader'),
}
]
},
{
test: /\.ttf$|\.woff$|\.eot$|\.otf$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: '/static/fonts',
},
},
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
);
config.resolve.extensions.push('.ts', '.tsx');
return config;
},
};