使用Next.js和Typescript设置React Styleguidist

时间:2019-03-13 08:34:16

标签: reactjs typescript next.js react-styleguidist

我正在尝试使用next.js和Typescript设置React styleguidist,但是我一直遇到问题。我当前的styleguide.config.js如下所示:

const path = require('path');

module.exports = {
  components: './components/**/*.tsx',
  propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json', {
    propFilter: { skipPropsWithoutDoc: true },
  }).parse,
  webpackConfig: {
    resolve: {
      alias: {
        static: path.join(__dirname, 'static'),
        lib: path.join(__dirname, 'lib'),
      },
    },
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'ts-loader',
            },
            {
              loader: 'babel-loader',
            },
          ],
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                outputPath: 'images',
              },
            },
          ],
        },
      ],
    },
  },
};

如果我只是一个具有基本jsx的非常基本的组件,那么一切正常,但是一旦我想为例如样式化的组件分配道具,打字稿就会开始抱怨。同样从components文件夹外部导入内容也会导致问题。 也许有人可以向我指出他们如何进行设置的示例?

0 个答案:

没有答案