error [LessError: error evaluating function `darken`: color.toHSL is not a function]

[maateusilva]

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 from index.js of antd-theme-generator which is the line where the "darken" method is added to COLOR_FUNCTIONS constant, but I don't think this is the best approach.

The full error log on the console when I run the project:

error [LessError: error evaluating function `darken`: color.toHSL is not a function] {
  stack: undefined,
  type: 'Runtime',
  filename: 'input',
  index: 345306,
  line: 15263,
  column: 32,
  callLine: NaN,
  callExtract: undefined,
  extract: [
    "@table-header-sort-active-bg: ~'darken(@table-header-bg, 3%)';",
    '@table-header-filter-active-bg: darken(@table-header-sorte-active-bg, 5%);',
    '@table-selection-column-width: 60px;'
  ]
}

Show your code I'm using @craco/craco instead of react-app-rewired so I have the craco.config.js file instead of config-overrides.js:

const { ESLINT_MODES } = require('@craco/craco');

const CracoLessPlugin = require('craco-less');
const CracoExtendScope = require('@dvhb/craco-extend-scope');

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const WebpackBar = require('webpackbar');
const webpack = require('webpack');
const path = require("path");
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");

let commitHash = process.env.CODEBUILD_RESOLVED_SOURCE_VERSION;
try {
  commitHash = require('child_process').execSync('git rev-parse --short HEAD').toString().replace('\n', '');
} catch {
  console.log('An error occurred while trying to get commitHash');
}

module.exports = {
  reactScriptsVersion: 'react-scripts',
  eslint: {
    enable: true,
    mode: ESLINT_MODES.file,
  },
  webpack: {
    plugins: [
      new AntDesignThemePlugin({
        antDir: path.resolve(__dirname, 'node_modules', 'antd'),
        stylesDir: path.resolve(__dirname, 'src', 'app', 'assets', 'stylesheets'),
        varFile: path.resolve(__dirname, 'src', 'app', 'assets', 'stylesheets', 'vars.less'),
        themeVariables: [
          '@primary-color',
          '@link-color',
        ],
        indexFileName: 'index.html',
        generateOnce: false,
      }),
      new WebpackBar({ profile: true }),
      ...(process.env.NODE_ENV === 'development' ? [new BundleAnalyzerPlugin({ openAnalyzer: false })] : []),
      new webpack.EnvironmentPlugin({ COMMIT_HASH: commitHash }),
    ],
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              '@primary-color': '#F88B0B',
              '@link-color': '#F88B0B',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
    {
      plugin: CracoExtendScope,
      options: {
        path: 'lib',
      },
    },
  ],
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
    ],
  },
};

Screenshot

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)

[JiangGeGe123]

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

[Samphon]

提供一下我个人解决方案

我分析报错是处理node_modules\antd\lib\table\style\index.less这个代码文件时产生的, 这个文件为antd3版本的表格样式代码. 导致报错的具体原因不细究

三种解决方案如下:

1. 升级antd版本到4, 因为该代码是处理antd3的表格样式代码出现的;

2. 降级antd-theme-generator到1.2.6版本或者更老, 就不会出现报错. 如果用的是antd-theme-webpack-plugin插件, 需要想办法将其版本锁文件中的antd-theme-generator依赖项降级; (缺点是降级后的版本编译出的这段表格表头颜色的代码会出现异常,表现为: 筛选功能的表格hover颜色为随机色)

3. 解决antd的less代码导致的报错, 关键在于themeVariables和varFile两处配置. 以下是antd-theme-generator的例子,

   
   /**antd-theme-generator配置文件 */

!/usr/bin/env node

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%); // 将该变量配置成动态变化的, 不在编译前处理就不会报错