Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
luocong2016 opened this issue Nov 27, 2020 · 6 comments

Comments

@luocong2016
Copy link

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
image

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
Copy link

ko06 commented Jan 6, 2021

@mzohaibqc Is any solution?

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

@mzohaibqc
Copy link
Owner

mzohaibqc commented Jan 10, 2021

@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
Copy link

seed-fe commented Jan 21, 2021

@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
Copy link

ko06 commented Jan 21, 2021

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

@seed-fe
Copy link

seed-fe commented Feb 18, 2021

@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
Copy link

xxl-007 commented May 7, 2022

mainLessFile未生效是什么原因吖

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants