Storybook 不懂按需导入 antd 组件

问题描述

我已按照说明此处获取antd 与 CRA 配合得很好.但是在从 storybook 使用它时，我遇到了一个错误:

I have followed instructions here to get antd working fine with CRA. But while using it from storybook, I was getting an error as:

针对 mixin 构建失败并显示消息 Inline JavaScript is not启用.它是否在您的选项中设置?

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

现在，storybook 理解 antd 但不能按需导入组件.babel 需要单独配置 storybook 吗?

Now, storybook understands antd but not importing components on demand. Is babel has to be configured separately for storybook?

1.关于使用 import { Button } from "antd";我明白了:

1. On using import { Button } from "antd";I get this:

2.关于使用

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

我明白了:

故事书版本:@storybook/react":^3.4.8"

依赖:antd":^3.7.3"

Dependency: "antd": "^3.7.3"

我(再次)被困在这个问题上很长时间了，谷歌搜索，任何帮助表示赞赏.谢谢！

I have been stuck (again) with this for quite long hours googling things, any help is appreciated. Thanks!

推荐答案

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

Using Storybook 4, you can create a webpack.config.js file in the .storybook directory with the following configuration:

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 中主要按钮颜色的样式覆盖.我想，您可能希望最终编辑默认主题，以便您可以删除该行，以防您不打算这样做.

Note that the above snippet includes a style overwriting of the primary button color in antd. I figured, you might want to eventually edit the default theme so you can remove that line in case you do not intend to do so.

您现在可以使用以下命令在 Storybook 中导入 Button 组件:

You can now import the Button component in Storybook using:

import {Button} from "antd";

无需同时导入样式文件.

without having to also import the style file.

这篇关于Storybook 不懂按需导入 antd 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！