5回答

张轩

2020-04-02

同学你好 今天帮你试了一下 新版变得简单多了啊

如果你用和我一样的旧版 可以指定版本号创建 npx -p @storybook/cli@5.2.8 sb init

如果你用新版 只需要一个命令 直接支持 typescript 

npx -p @storybook/cli sb init --type react_scripts

文档：https://storybook.js.org/docs/guides/guide-react/

整理了一个和新版配置相关的文档，请看：https://shimo.im/docs/tgP9yYy9jp8HtghT

2

0

WOW林勇强

2020-04-02

//.storybood/main.js

const path = require('path');
module.exports = {
 stories: ['../src/**/*.stories.tsx', '../src/styles/index.scss'],
 addons: ['@storybook/addon-actions', '@storybook/addon-links'],
 webpackFinal: async config => {
   // do mutation to the config
  config.module.rules.push({
   test: /\.(ts|tsx)$/,
   use: [
    {
     loader: require.resolve('ts-loader'),
    },
    // Optional
    {
     loader: require.resolve('react-docgen-typescript-loader'),
    },
   ],
  });
  config.module.rules.push({
   test: /\.scss$/,
   use: ['style-loader', 'css-loader', 'sass-loader'],
   include: path.resolve(__dirname, '../'),
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
 },

};

和我这样子配置就行了，记得给我点赞哟?，么么哒，其实文档里都有自己慢慢搜就好了

1

4

WOW林勇强

回复

进阶的前端小白

你得把错误给我看 否则我咋知道啥原因

2020-04-03

共4条回复

pino宋

2020-04-13

解决了！不要用ts-loader

0

0

pino宋

2020-04-13

我也遇到了同样的问题，怎么解决？？？

0

0

ku咖啡不加糖

2020-04-05

新版的话直接在main.js里，添加之前的webpack里的代码,把 stories: ['../src/**/*.stories.js']改成stories: ['../src/**/*.stories.tsx']

参考我的main.js：

```

module.exports = {

    stories: ['../src/**/*.stories.tsx'],

    addons: [

    '@storybook/preset-create-react-app',

    '@storybook/addon-actions',

    '@storybook/addon-links',

],

webpackFinal: async config => {

    config.module.rules.push({

        test: /\.(ts|tsx)$/,

        loader: require.resolve('babel-loader'),

        options: {

            presets: [['react-app', { flow: false, typescript: true }]],

        },

    });

    config.resolve.extensions.push('.ts', '.tsx');

    return config;

    }

};

```

0

2

berners

回复

业火之理

其实老师使用的脚手架工具，没有配置webpack过程。main.js文件就有点类似webpack配置。如果项目不是使用脚手架工具创建的。可以直接倒入webpack的配置，就可以。 const webpack_dev_config = require('../build/webpack.dev.config'); module.exports = { stories: ['../stories/**/*.stories.tsx', '../src/**/*.scss'], webpackFinal: async config => { config.module.rules = [ ...config.module.rules, ...webpack_dev_config.module.rules, ]; config.resolve.extensions = webpack_dev_config.resolve.extensions; return config; }, };

2020-08-08

共2条回复