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

[luocong2016]

Describe the bug

error [LessError: error evaluating function `darken`: color.toHSL is not a function] {
  stack: undefined,
  type: 'Runtime',
  filename: 'input',
  index: 357348,
  line: 15700,
  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-sort-active-bg, 5%);',
    '@table-selection-column-width: 60px;'
  ]
}

Show your code

// color.js
const path = require('path');
const { generateTheme } = require('antd-theme-generator');

const options = {
  antDir: path.join(__dirname, './node_modules/ant-design-vue'),
  stylesDir: path.join(__dirname, './src'),
  varFile: path.join(__dirname, './src/styles/variables.less'),
  mainLessFile: path.join(__dirname, './src/styles/index.less'),
  themeVariables: ['@primary-color'],
  outputFilePath: path.join(__dirname, './public/color.less'),
}

generateTheme(options)
  .then((less) => {
    console.log(less);
    console.log('Theme generated successfully');
  })
  .catch((error) => {
    console.log('Error', error);
  });

// babel.config.js
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      },
    ],
  ],
};

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      /* https://github.com/webpack-contrib/less-loader */
      less: {
        lessOptions: {
          // modifyVars: {
          //   'primary-color': '#7c6dc5',
          // },
          javascriptEnabled: true,
        },
      },
    },
  },
};

Screenshots

Version

"ant-design-vue": "^2.0.0-rc.2",
"antd-theme-generator": "^1.2.8",
"core-js": "^3.6.5",
"less-loader": "^7.1.0",
"vue": "^3.0.0"

[ko06]

@mzohaibqc Is any solution?

"antd": "^3.11.6",
"antd-theme-generator": "^1.2.8",

[mzohaibqc]

@ko06 1.2.8 version is compatible with antd@4.x.x

Try updating antd version and see if it solves your problem. If you can't update antd version then unfortunately you have to use some previous version of antd-theme-generator which is compatible with your version of antd but that might have bugs that has been fixed over time.

[seed-fe]

@ko06 1.2.8 version is compatible with antd@4.x.x

Try updating antd version and see if it solves your problem. If you can't update antd version then unfortunately you have to use some previous version of antd-theme-generator which is compatible with your version of antd but that might have bugs that has been fixed over time.

Thanks for your comment！I have the same problem. My antd version is 3.19.1. Could you please tell me which version of antd-theme-generator is compatible with my version of antd?

[ko06]

@seed-fe, working fine in antd-theme-generator@1.2.6:

[seed-fe]

@seed-fe, working fine in antd-theme-generator@1.2.6:

Thanks a lot! Antd-theme-generator@1.2.6 works fine with antd@3.19.1.

[xxl-007]

mainLessFile未生效是什么原因吖