Question

我正在尝试使用我的meteor 1.4项目设置反应故事书，该项目包含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 /> 
}

但我不确定如何将这些“打包”的风格导入故事中。

Answer 1

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

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

将流星的样式导入React Storybook

1 个答案: