好像新版的storybook配置ts的与老师配置的不一样，现在.storybook下面只有一个main.js

Question

现在主要还有一个问题，就是不知道style目录下的样式文件怎么引入，也一直报错

Answer 1

张轩 2020-04-02 10:37:49

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

如果你用和我一样的旧版 可以指定版本号创建 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

Answer 2

WOW林勇强 2020-04-02 15:57:33

//.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

  我之前也这么试过，但是还是会一直报错

• WOW林勇强 回复 提问者 进阶的前端小白 #2

  你得看看上面我写的那些包你装了没，都装了的话 应该是没问题的，你按照我这个弄完 看看报什么错

• 提问者 进阶的前端小白 回复 WOW林勇强 #3

  config.module.rules.push({
     test: /\.scss$/,
     use: ['style-loader', 'css-loader', 'sass-loader'],
     include: path.resolve(__dirname, '../'),
    });
  新版的好像不需要这个了，我没加，样式也生效了，好像只要导入index.scss就好了，加入这个会因为loader什么的报错，我的是这个样子的

点开查看后面1条评论

Answer 3

pino宋 2020-04-13 14:23:09

解决了！不要用ts-loader

Answer 4

pino宋 2020-04-13 13:54:05

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

Answer 5

ku咖啡不加糖 2020-04-05 23:07:50

新版的话直接在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;

    }

};

```

• 业火之理 #1

  webpackFinal也可以不用配 实测Ok，也就是新版只要在main里改个stories配的后缀名就ok

• berners 回复 业火之理 #2

  其实老师使用的脚手架工具，没有配置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;
    },
  };