0

这让我发疯，但是当我使用 styleguidist server --open 运行 react-styleguidist 时，我只看到一个文件目录，我认为这是我的根目录，而不是我的风格指南。 https://imgur.com/a/9mYliLH

有没有人见过这个？这是我所有的依赖项。

    "@babel/core": "^7.16.0",
    "@babel/plugin-transform-runtime": "^7.16.4",
    "@babel/preset-typescript": "^7.16.0",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-node-resolve": "^13.0.6",
    "@rollup/plugin-url": "^6.1.0",
    "@svgr/rollup": "^5.5.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "postcss": "^8.3.11",
    "postcss-url": "^10.1.3",
    "react-docgen-typescript": "^2.1.1",
    "react-styleguidist": "^11.1.7",
    "rimraf": "^3.0.2",
    "rollup": "^2.60.0",
    "rollup-plugin-local-resolve": "^1.0.7",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.1",
    "rollup-plugin-styles": "^3.14.1",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.31.0",
    "sass": "^1.43.4",
    "typescript": "^4.5.2"
  },```

// and here is my config

path = require('path');
const pkg = require('./package.json');
const webpackConfig = require('./config/webpack.config');

module.exports = {
  title: `${pkg.name} v${pkg.version}`,
  components: 'src/components/**/[A-Z]*.{jsx,tsx}',
  moduleAliases: {
    [pkg.name]: path.resolve(__dirname, 'src'),
    ['react']: path.resolve(__dirname, '../memo-react-admin-client/node_modules/react'),
    ['react-dom']: path.resolve(__dirname, '../memo-react-admin-client/node_modules/react-dom'),
  },
  showSidebar: true,
  usageMode: 'expand',
  skipComponentsWithoutExample: true,
  theme: {
    color: {
      link: '#065fd4',
      linkHover: '#00adef',
    },
    font: ['Helvetica', 'sans-serif'],
  },
  styles: {
    Ribbon: {
      root: {
        backgroundImage: 'url("https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png")',
        backgroundSize: '50px 50px',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'right top',
      },
      link: {
        backgroundColor: '#065fd4',
      },
    },
    Heading: {
      heading2: {
        fontSize: 26,
      },
    },
    ReactComponent: {
      root: {
        marginBottom: 20,
      },
      header: {
        marginBottom: 0,
      },
      tabs: {
        marginBottom: 0,
      },
    },
  },
  propsParser: require('react-docgen-typescript').withDefaultConfig('./tsconfig.json').parse,
  webpackConfig,
  getExampleFilename(componentPath) {
    return componentPath.replace(/\.(jsx?|tsx?)$/, '.examples.md');
  },
  getComponentPathLine(componentPath) {
    const name = path.basename(componentPath, '{.tsx, .jsx}').replace(/\.(jsx?|tsx?)$/, '');

    return `import { ${name} } from '${pkg.name}';`;
  },
};


  [1]: https://i.stack.imgur.com/QeRyG.png
4

0 回答 0