将流星中的样式导入 React Storybook答案

【问题标题】：Importing styles from meteor into React Storybook将流星中的样式导入 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）。谢谢。

标签： javascript css twitter-bootstrap meteor reactjs

【解决方案1】：

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

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

【讨论】：