我已按照此处的说明使antd与CRA一起正常工作。但是在从storybook使用它时，我收到了一个错误：
针对 mixin 的构建失败并显示消息 Inline JavaScript is not enabled。它是在您的选项中设置的吗？
我已经修复了以下关于我在此处提出的问题的建议。
现在，storybook 能理解antd 但不能按需导入组件。babel 是不是需要单独为 storybook 配置？
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”
我已经（再次）被困在这个问题上很长时间了，谷歌搜索，任何帮助表示赞赏。谢谢！
使用 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";
无需同时导入样式文件。
如果您使用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组件了。
我目前正在使用 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;
};