Open maateusilva opened 3 years ago
我遇到了同样的问题,请问怎么解决
我分析报错是处理node_modules\antd\lib\table\style\index.less
这个代码文件时产生的, 这个文件为antd3版本的表格样式代码. 导致报错的具体原因不细究
三种解决方案如下:
升级antd
版本到4, 因为该代码是处理antd3的表格样式代码出现的;
降级antd-theme-generator
到1.2.6版本
或者更老, 就不会出现报错. 如果用的是antd-theme-webpack-plugin
插件, 需要想办法将其版本锁文件中的antd-theme-generator
依赖项降级; (缺点是降级后的版本编译出的这段表格表头颜色的代码会出现异常,表现为: 筛选功能的表格hover颜色为随机色)
解决antd的less代码导致的报错, 关键在于themeVariables
和varFile
两处配置. 以下是antd-theme-generator的例子,
/**antd-theme-generator配置文件 */
const path = require('path'); const { generateTheme } = require('antd-theme-generator');
const options = { // ... varFile: 'vars.less', themeVariables: [ '@table-header-bg', '@table-header-sort-active-bg', // 配置该变量为动态切换的 ]
// ... };
generateTheme(options) .then((less) => { console.log('Theme generated successfully.'); }) .catch((error) => { console.log('Theme generated Error:', error); }); };
varFile关键代码如下
```less
@import '~antd/lib/style/themes/default.less';
@table-header-bg: #444e69; // 表格头部背景色
@table-header-sort-active-bg: darken(@table-header-bg, 3%); // 将该变量配置成动态变化的, 不在编译前处理就不会报错
Describe the bug The
window.less.modifyVars
is not working due to an error while compiling Less when the project runs. I found a workaround by commenting the line 17 fromindex.js
ofantd-theme-generator
which is the line where the "darken" method is added toCOLOR_FUNCTIONS
constant, but I don't think this is the best approach.The full error log on the console when I run the project:
Show your code I'm using
@craco/craco
instead ofreact-app-rewired
so I have thecraco.config.js
file instead ofconfig-overrides.js
:Screenshot
![image](https://user-images.githubusercontent.com/40677854/121440419-3cda9980-c95e-11eb-80ed-8c0bd9d0f82e.png)
Version antd@3.x.x antd-theme-webpack-plugin@1.3.7 (the same problem on the current version, I had downgraded just to check if it works and keeps crashing)