Блог

Это сводит меня с ума, но когда я запускаю react-styleguidist с помощью styleguidist server —open, я вижу только каталог файлов, я думаю, что это мой корневой каталог, а не мое руководство по стилю.

https://imgur.com/a/9mYliLH

Кто-нибудь видел это раньше? Вот все мои зависимости.

 "dependencies": {
    "@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"
},
 

// и вот моя конфигурация

 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}';`;
  },
};