带有 NgZorro Input 和 Storybook 的 Angular 组件

问题描述

我正在尝试使用 NgZorro 组件实现自定义组件并通过 Storybook 对其进行测试。首先（如多篇文章所述）我创建了一个组件故事：

export default {
  component: SomeComponent,title: 'Some Component',decorators: [
    moduleMetadata({
      imports: [NzInputModule,SomeComponentModule]
    }
  ]
} as Meta;

export const Test: Story<SomeComponentModule> = () => ({
  template: `<app-some-component>
    <input nz-input nzSize="small"/>
  </app-some-component>`
});

在那个阶段，我已经有了输入但没有应用 NgZorro 样式的故事书。接下来，我更新了 .storybook/preview.js：

import '../src/style.less';

和 .storybook/main.js 与：

  ...
  webpackFinal: async (config) => {
    config.module.rule.push({
      test: /\.less$/,use: [{
        loader: 'less-loader',options: {
          lessOptions: {
            javascriptEnabled: true
          }
        }
      }]
    };
    return config;
  }
}

当我运行“npm run storybook”时，它打印出了一个关于以下内容的错误：

ERROR in ./src/style.less
Module build Failed (from ./node_modules/@angular-devkit/build-angular/node_modules/less-loader/dist/cjs.js):


// ================================================================
.table-size(~'middle',@table-padding-vertical-md,@table-padding-horizontal-md,@table-font-size-md);
^
Operation on an invalid type
      Error in node_modules\ng-zorro-antd\table\style\size.less (line 53,column 0)
 @ ./.storybook/preview.js 1:0-48
 @ ./.storybook/preview.js-generated-config-entry.js

我一直在那个地方。 Ng-Zorro 本身有什么问题吗？或者什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）