故事书无法理解对antd组件的按需导入 [英] Storybook doesn't understand import on demand for antd components

问题描述

我已按照说明在这里获取 antd 与 CRA 正常工作.但是在故事书中使用它时，出现了一个错误:

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出现以下消息:内联JavaScript不是 已启用.是在您的选项中设置的吗?

Build fails against a mixin with message Inline JavaScript is not enabled. Is it set in your options?

我已已修复，在针对某个问题提出建议后，我在此处.

I had fixed that following suggestions on an issue I raised here.

现在，故事书了解 antd ，但不能按需导入组件.必须为故事书单独配置babel吗?

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版本:"@ storybook/react":"^ 3.4.8"

Storybook version: "@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.

您现在可以使用以下语言将故事组件中的Button组件导入:

You can now import the Button component in Storybook using:

import {Button} from "antd";

无需导入样式文件.

这篇关于故事书无法理解对antd组件的按需导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！