Question

我在这里遵循instructions，以使 antd 与 CRA 正常工作。但是在故事书中使用它时，出现了错误：

生成失败，导致mixin出现以下消息：内联JavaScript不是已启用。是在您的选项中设置的吗？

我已修复，在针对我提出的问题提出建议后here。

现在，故事书可以理解 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中主要按钮颜色的样式覆盖。我认为，您最终可能希望编辑默认主题，以便在不打算这样做时可以删除该行。

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

import {Button} from "antd";

无需导入样式文件。

Answer 2

我目前正在将故事书与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;
};

Answer 3

如果您使用的是AntD Advanced-Guides for React和故事书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组件的按需导入

3 个答案: