将流星中的样式导入 React Storybook

Posted 2023-03-06

【中文标题】将流星中的样式导入 React Storybook

【英文标题】：Importing styles from meteor into React Storybook

【发布时间】：2016-12-23 18:38:24

【问题描述】：

我正在尝试使用我的流星 1.4 项目设置 react storybook，该项目具有包 twbs:bootstrap3 和一些自定义样式。

从链接中读取信息以设置样式here 后，我有以下代码：

const path = require('path');

module.exports = 
  module: 
    loaders: [
      
        test: /\.less?$/,
        loader: ["style", "css", "less"],
        include: path.resolve(__dirname, '../'),
      ,
      
        test: /\.css?$/,
        loader: ["style", "raw"],
        include: path.resolve(__dirname, '../'),
      ,
   

这是我的故事

import React from 'react';
import  storiesOf, action  from '@kadira/storybook';
import  styles  from './shared';
import HomeSearch from '../features/Search/components/HomeSearch/HomeSearch.jsx';

storiesOf('HomeSearch', module)
  .add('normal', () =>  
      return getItem();
    );


function getItem() 
  return <HomeSearch /> 

但我不确定如何将那些“打包”的样式导入到故事中。

【问题讨论】：

第一个 sn-p 中的代码是 css 加载器的 webpack 配置（需要使用 npm 安装）。您仍然需要构建样式表。我不确定我是否完全理解您的要求。

@nicholaschris 我不熟悉 webpack 的工作原理，我想从我的流星项目中获取样式并在我的 Storybook 故事中使用它们。我发布的链接中提供的信息只是给了我那个代码（或者更确切地说是导入 .css 文件的代码，我假设我正确地修改了 less 和 sass）。谢谢。

【参考方案1】：

如果 CSS 是预编译的并且是全局的，您可以在自定义 preview-head.html 文件中添加标签。见：https://storybook.js.org/configurations/add-custom-head-tags/

如果 CSS 不是全局的，或者需要处理，则需要将正确的加载器添加到自定义 webpack 配置中。见https://storybook.js.org/configurations/custom-webpack-config/