将Styleguidist与React中的Ant UI结合使用

Question

我正在创建一个使用Ant作为基准的样式指南。我遇到的问题是在我运行yarn run styleguide时启动主题配置。下面是一些文档-- https://ant.design/docs/react/use-with-create-react-app

我使用了这个样板作为模板，但他们使用的版本已被弃用，并且较旧/不是最新的样式指南文档，我希望使用所有内容的最新版本-- https://github.com/newswim/styleguidist-ant-design/tree/master

我不确定如何将上面的旧版本转换为新版本。当我运行yarn 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'
      }
  ]
}

Answer 1

Styleguidist将覆盖您的config-overrides.js文件并删除babel-plugin-import。

尝试将dangerouslyUpdateWebpackConfig添加到您的styleguide.config.js中，类似于config-overrides.js，只是为了提供样式指南。

例如：

​

const { addBabelPlugin, addLessLoader } = require('customize-cra');

module.exports = {
  dangerouslyUpdateWebpackConfig(webpackConfig, env) {
    webpackConfig = addBabelPlugin(
      ['import', { libraryName: 'antd', style: true }],
    )(webpackConfig);
    return webpackConfig;
  },
};

​