React-Bootstrap 样式未与故事书一起加载

Posted 2023-02-19

【中文标题】React-Bootstrap 样式未与故事书一起加载

【英文标题】：React-Bootstrap styles not loading with storybook

【发布时间】：2020-07-12 19:36:07

【问题描述】：

我最近开始在我的 react-typescript 项目中使用 storybook 并遇到了以下问题：

我的 react-bootstrap 组件没有样式。组件是 已加载但没有样式。我尝试使用样式加载器和 css 加载器在自定义 webpack 配置中，但没有工作。 我正在导入一些本地字体，但字体总是被加载 在字体文件夹中。有没有办法加载字体 /静态/字体目录？我正在使用文件加载器来加载字体。 我有一个 globalStyles.tsx 文件和一个 iconStyles.tsx 文件，我 想在故事板 iframe 中全局包含。什么会 是最好的方法吗？

我正在本地主机上运行故事书。

下面是我的 main.js 和自定义 webpack 配置：

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;
  ,
;

【问题讨论】：

这个运气好吗？已经尝试了所有的答案，但没有运气。

【参考方案1】：

您应该在.storybook/preview.js 中同时导入 Bootstrap CSS 和 JS：

import 'relative/path/to/bootstrap/dist/css/bootstrap.css'
import 'relative/path/to/bootstrap/dist/js/bootstrap.js'

刚刚使用 storybook/react-6.3.7 和 bootstrap-5.1.0 进行了测试。

【讨论】：

好一个，非常简单的解决方案:)

【参考方案2】：

您所要做的就是在.storybook/preview.js 中导入您的css 文件，如mentioned in the docs。

【讨论】：

不知道为什么这是最受欢迎的答案。这很明显，并没有回答如何让引导样式与故事书一起使用的问题。

我发现这个问题正是因为我试图在故事书中拥有自己的 react-boostrap 组件并且它们缺乏样式。我给出的答案是在故事书的不和谐频道中向我建议的。它确实解决了我的问题。

【参考方案3】：

我没有正式的答案，但也许故事书默认情况下无法识别正在使用引导程序。

我正在做的一个快速解决方法是在 stories.js 文件中添加以下行 import 'bootstrap/dist/css/bootstrap.css'; .它使我能够以适当的样式可视化我的 reactrsap 组件。