search

NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.81k stars 3.86k forks source link

Angular 12.1 LESS problem #6869

Closed rockletz closed 2 years ago

rockletz commented 3 years ago

Reproduction link

https://stackblitz.com/edit/angular-ivy-jfxzab?file=package.json

Steps to reproduce

Upgrade to Angular 12.1

What is expected?

The project should compile correctly.

What is actually happening?

./src/theme.less - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./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 /home/samuel/VBWeb2/vbweb_frontend/node_modules/ng-zorro-antd/table/style/size.less (line 39, column 0)
    at processResult (/home/samuel/VBWeb2/vbweb_frontend/node_modules/webpack/lib/NormalModule.js:701:19)
    at /home/samuel/VBWeb2/vbweb_frontend/node_modules/webpack/lib/NormalModule.js:807:5
    at /home/samuel/VBWeb2/vbweb_frontend/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/samuel/VBWeb2/vbweb_frontend/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/samuel/VBWeb2/vbweb_frontend/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.lessLoader (/home/samuel/VBWeb2/vbweb_frontend/node_modules/less-loader/dist/index.js:54:5)
Environment Info
ng-zorro-antd 12.0.1
Browser Chrome
sainisagar310 commented 3 years ago

+1

llkui commented 2 years ago

+1

enk0de commented 2 years ago

+1 (https://github.com/NG-ZORRO/ng-zorro-antd/issues/6760 I had opened this issue before, but i still have same problem..)

wzhudev commented 2 years ago

Hey guys. Could you please create a minimal reproduction? We will look into this. Thanks!

zorro-bot[bot] commented 2 years ago

Hello @rockletz. Please provide a online reproduction by forking this link https://stackblitz.com/edit/ng-zorro-antd-start or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @rockletz, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 stackblitz 或者提供一个最小化的 GitHub 仓库 被标记为 Need Reproduce 的 issue 7 天内未跟进将会被自动关闭。

wzhudev commented 2 years ago

Stackblitz may be not helpful here. You could upload a repo.

llkui commented 2 years ago

I found the reason for the bug.

When the project is updated to angular12 and ng-zorro-antd12. If the content of theme.less file is not updated, such a bug will appear.

So, update the content of theme.less file, it's no problem. theme.less

zapatel commented 2 years ago

+1

billpeace commented 2 years ago

上次我测试出来了

在引入ng-zorro-antd/ng-zorro-antd.less的时候

不重新引入 https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less 不会报错

假如重复引入 https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less 最新的 也不会报错

假如重复引入 https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less 以前zorro版本，就会报错

no-response[bot] commented 2 years ago

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. If you can provide more information, feel free to ping anyone of our maintainers to reopen this issue. Thank you for your contributions. --- 这个 issue 已经被自动关闭，因为您没有向我们提供更多的信息。仅凭目前的描述我们无法采取任 何行动，如果您能提供更多的信息请随时联系我们的开发人员重新打开这个 issue。 感谢您的贡献。

cnkker commented 2 years ago

原来是这个原因啊

zhenzhenChange commented 1 year ago

Less v4.0

是因为 Less 在 v4 中将除法/的解析规则变了：除法周围需要加上括号包裹。

v4 以前：

@var: xxx / xxx;

现在：

@var: (xxx / xxx);

自己定制主题的时候，一般是先引入组件库的，然后再重写一遍ng-zorro-antd的主题变量来达到覆盖的目的，所以就是自己复制过来的主题变量没有同步修改。

@import '../node_modules/ng-zorro-antd/ng-zorro-antd.less';

@table-padding-vertical-md: @table-padding-vertical * 3 / 4;
@table-padding-horizontal-md: @table-padding-horizontal / 2;
@table-padding-vertical-sm: @table-padding-vertical / 2;
@table-padding-horizontal-sm: @table-padding-horizontal / 2;

改过来就好了：

@table-padding-vertical-md: (@table-padding-vertical * 3 / 4);
@table-padding-horizontal-md: (@table-padding-horizontal / 2);
@table-padding-vertical-sm: (@table-padding-vertical / 2);
@table-padding-horizontal-sm: (@table-padding-horizontal / 2);

这个问题因人而异，因为不是所有人（项目）都是复制全部主题变量来覆盖，导致难以发现，才以为是ng-zorro-antd内部的问题，大部分人应该都是只重写其中几个主题变量，所以就不会有问题（除法问题）。

今天升级项目的时候遇到了这个问题，从@angular-devkit/build-angular到ng-zorro-antd，再到less/less-loader，找了半天，蓦然回首，小丑竟是我自己？

特此记录一下，望后来者莫步后尘。

image

image