故事书不了解对antd组件的按需导入

Question

我已按照此处的指示进行操作，以使antd与CRA正常工作。但是，从Storybook中使用它时，出现以下错误：

生成失败，原因是未启用混入消息，并显示消息内联JavaScript。是否在您的选项中设置了？

我已经解决了我在这里提出的一个问题之后的建议。

现在，故事书可以理解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”

我已经（长时间）被困在谷歌上很长时间了，对我们的任何帮助表示感谢。谢谢！

Answer 1

使用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";

无需也导入样式文件。

Answer 2

我目前正在 antd 中使用 Storybook，通过在 .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;
};