使用Storybook插件信息时,它会使webpack报废

时间:2019-12-15 22:05:03

标签: webpack-4 storybook storybook-addon-specifications

因此,当我运行没有附加信息的故事书时,它可以正常工作。当我添加addon-info时,它会出现以下问题:当我删除addon时,一切都很好。对于Storybook,似乎是一个接一个的问题。我为addon-info添加了一个排除项,但也不起作用。 有什么想法吗?

    ERROR in ./node_modules/@storybook/addon-info/dist/components/PropTable/components/Table.js
Module not found: Error: Can't resolve 'style' in '/Users/ds/ht/htc'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'style-loader' instead of 'style',
                 see https://webpack.js.org/migrate/3/#automatic-loader-module-name-extension-removed
 @ ./node_modules/@storybook/addon-info/dist/components/PropTable/components/Table.js 12:0-23
 @ ./node_modules/@storybook/addon-info/dist/components/PropTable/index.js
 @ ./node_modules/@storybook/addon-info/dist/index.js
 @ ./stories/badge.stories.js
 @ ./stories sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./node_modules/@storybook/addon-info/dist/components/PropTable/components/Td.js
Module not found: Error: Can't resolve 'style' in '/Users/ds/ht/htc'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'style-loader' instead of 'style',
                 see https://webpack.js.org/migrate/3/#automatic-loader-module-name-extension-removed
 @ ./node_modules/@storybook/addon-info/dist/components/PropTable/components/Td.js 12:0-23
 @ ./node_modules/@storybook/addon-info/dist/components/PropTable/index.js
 @ ./node_modules/@storybook/addon-info/dist/index.js
 @ ./stories/badge.stories.js
 @ ./stories sync \.stories\.js$
 @ ./.storybook/config.js

这是我的webpack.config文件(请记住,我添加了:排除:/ node_modules(?!/ @ storybook / addon-info)/ ),但没有执行任何操作。

module.exports = {
  module: {
    rules: [
      {
        // Transform 3rd party css into an external stylesheet (vendor.[md5:contenthash:hex:20].css)
        test: /\.s?css$/,
        include: [/node_modules/, /styles\/global_styles/, /styles\/vendor/],
        use: vendorCSSLoaders,
      },
      {
        test: /\.s?css$/,
        exclude: [/node_modules/, /styles\/global_styles/, /styles\/vendor/],
        use: SCSSLoaders,
      },
      {
        test: /\.css$/,
        loader: 'style!css?importLoaders=1'
      },
    ],
  },
  plugins: [
    extractVendorCSSPlugin,
    extractSCSS,
  ],
  /**
   * Resolve import paths from global.SRCDIR
   * @see  http://moduscreate.com/es6-es2015-import-no-relative-path-webpack/
   */
  resolve: {
    modules: [
      path.resolve(__dirname, '../src'),
      path.resolve(__dirname, '../node_modules'),
    ],
    extensions: ['.js', '.jsx']
  }
};

0 个答案:

没有答案