8

我已按照此处的说明使antd与CRA一起正常工作。但是在从storybook使用它时，我遇到了一个错误：

针对 mixin 构建失败，并显示未启用消息内联 JavaScript。它在您的选项中设置吗？

我已经修复了关于我在这里提出的问题的以下建议。

现在，storybook能理解antd 但不能按需导入组件。故事书必须单独配置 babel 吗？

1 . 在使用import { Button } from "antd"; 我得到这个：

图片

2 . 关于使用

import Button from "antd/lib/button";
import "antd/lib/button/style";

我得到：

图片

故事书版本：“@storybook/react”：“^3.4.8”

依赖：“antd”：“^3.7.3”

我已经（再次）被这个问题困扰了很长时间，在谷歌上搜索东西，感谢任何帮助。谢谢！

4

3 回答 3

7

使用 Storybook 4，您可以使用以下配置在.storybook目录中创建webpack.config.js文件：

const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                loader: 'babel-loader',
                exclude: /node_modules/,
                test: /\.js$/,
                options: {
                    presets: ["@babel/react"],
                    plugins: [
                        ['import', {libraryName: "antd", style: true}]
                    ]
                },
            },
            {
                test: /\.less$/,
                loaders: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "less-loader",

                        options: {
                            modifyVars: {"@primary-color": "#d8df19"},
                            javascriptEnabled: true
                        }
                    }
                ],
                include: path.resolve(__dirname, "../")
            }
        ]
    }
};

请注意，上面的代码片段包括 antd 中主要按钮颜色的样式覆盖。我想，您可能希望最终编辑默认主题，以便您可以删除该行，以防您不打算这样做。

您现在可以使用以下方法在 Storybook 中导入 Button 组件：

import {Button} from "antd";

无需导入样式文件。

于 2018-11-26T23:46:41.177 回答
2

如果您正在使用AntD Advanced-Guides for React和 storybook v5 .storybook/webpack.config.js，请使用以下内容创建：

const path = require('path');

module.exports = async ({ config, mode }) => {

  config.module.rules.push({
      loader: 'babel-loader',
      exclude: /node_modules/,
      test: /\.(js|jsx)$/,
      options: {
          presets: ['@babel/react'],
          plugins: [
              ['import', {
                libraryName: 'antd',
                libraryDirectory: 'es',
                style: true
              }]
          ]
      },
  });

  config.module.rules.push({
      test: /\.less$/,
      loaders: [
          'style-loader',
          'css-loader',
          {
              loader: 'less-loader',
              options: {
                  modifyVars: {'@primary-color': '#f00'},
                  javascriptEnabled: true
              }
          }
      ],
      include: [
        path.resolve(__dirname, '../src'),
        /[\\/]node_modules[\\/].*antd/
      ]
  });

  return config;
};

然后就可以import { Button } from 'antd'用来导入antd组件了。

于 2019-04-28T20:58:28.870 回答
1

我目前正在使用带有 antd 的故事书，并且通过在 .storybook 文件夹中的 webpack.config.js 文件中使用此配置，我让它发挥得很好：

const { injectBabelPlugin } = require('react-app-rewired');
const path = require("path");

module.exports = function override(config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
);



config.module.rules.push({
  test: /\.css$/,
  loaders: ["style-loader", "css-loader", ],
  include: path.resolve(__dirname, "../")
  })


return config;
};
于 2018-10-06T18:15:39.953 回答