Javascript 在React中结合使用Styleguidist和antui

我正在创建一个使用AntUI作为基线的样式指南。我遇到的问题是在运行Thread run styleguide时启动主题配置。 以下是一些文档--

我曾将此样板用作模板，但他们使用的版本已被弃用，且较旧/与最新的styleguidist文档不符，我希望使用所有内容的最新版本--

我不知道如何将上面的旧版本翻译成新版本。当我运行warn run start时，它使用了新变量，因为react app rewired在该命令中，但我需要它与styleguidist一起使用最新版本的所有内容

谢谢

package.json

  "name": "components",
  "version": "0.1.0",
  "private": false,
  "dependencies": {
    "@types/classnames": "^2.2.9",
    "@types/jest": "24.0.22",
    "@types/node": "12.12.6",
    "@types/react": "16.9.11",
    "@types/react-dom": "16.9.4",
    "antd": "^3.25.0",
    "babel-plugin-import": "^1.12.2",
    "classnames": "^2.2.6",
    "customize-cra": "^0.8.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "prop-types": "^15.7.2",
    "react": "^16.11.0",
    "react-app-rewire-less": "^2.1.3",
    "react-app-rewired": "^2.1.5",
    "react-docgen-typescript": "^1.15.1",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0",
    "react-styleguidist": "^10.2.0",
    "todomvc-app-css": "^2.3.0",
    "typescript": "3.7.2"
  },
  "scripts": {
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

config-overrides.js

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#ffffff' },
  }),
);

styleguide.config.js

module.exports = {
  title: 'UI Components',
  pagePerSection: true,
  version: 'v1.0.0',
  propsParser: require('react-docgen-typescript').withCustomConfig(
    './tsconfig.json'
  ).parse,
  sections: [
      {
          name: "Introduction",
          content: "docs/introduction.md"
      },
      {
          name: "Documentation",
          sections: [
              {
                  name: "Installation",
                  content: "docs/installation.md",
                  description: "The description for the installation section"
              }
          ]
      },
      {
          name: "UI Components",
          content: "docs/reactui.md",
          components: "src/components/**/!(*.spec).tsx",
          ignore: [
              "src/components/App.js",
              "src/components/Footer.js",
              "src/components/Header.js"
          ],
          exampleMode: "expand", // 'hide' | 'collapse' | 'expand'
          usageMode: "expand" // 'hide' | 'collapse' | 'expand'
      }
  ]
}

---

Styleguidist覆盖您的

config overrides.js

文件，并删除antd的

babel插件导入

尝试向您的
styleguide.config.js
中添加
危险的UpdateWebPackageConfig
，类似于仅针对styleguide的
配置覆盖.js

例如：


const{addBabelPlugin，addLessLoader}=require（'customize-cra'）；
module.exports={
危险地更新WebPackageConfig（WebPackageConfig，env）{
webpackConfig=addBabelPlugin(
['import'，{libraryName:'antd'，style:true}]，
)（网页配置）；
返回webpackConfig；
},
};
Styleguidist覆盖您的
config overrides.js
文件，并删除antd的
babel插件导入

尝试向您的
styleguide.config.js
中添加
危险的UpdateWebPackageConfig
，类似于仅针对styleguide的
配置覆盖.js

例如：


const{addBabelPlugin，addLessLoader}=require（'customize-cra'）；
module.exports={
危险地更新WebPackageConfig（WebPackageConfig，env）{
webpackConfig=addBabelPlugin(
['import'，{libraryName:'antd'，style:true}]，
)（网页配置）；
返回webpackConfig；
},
};