can not use in antd-design-mobile

[guoguo0202]

RT:

  Error { [Error: JavaScript evaluation error: 'ReferenceError: colorPalette is not defined']
  message:'JavaScript evaluation error: \'ReferenceError: colorPalette is not defined\'',
  stack: undefined,
  type: 'Syntax',
  filename: 'input',
  index: 124170,
  line: 5808,
  column: 32,
  callLine: NaN,
  callExtract: undefined,
  extract:
   [ '',
     '.brand-primary-7 { color: color(~`colorPalette("@{brand-primary}", 7)`); }',
     ' .brand-primary-5 { color: color(~`colorPalette("@{brand-primary}", 5)`); }' ] }

[DarwinniwraD]

Maybe you need to load the default colorPalette from the antd/lib/style/color/colorPalette.less, like this:

const { override, addLessLoader } = require('customize-cra');

const loaderOptions = {
  modifyVars: {
    'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`
  },
  javascriptEnabled: true
};

module.exports = override(
  ...other-plugins,
  addLessLoader(loaderOptions),
  themePlugin
);

[Zohaib Ijaz]

Thanks @DarwinniwraD for your help. @guoguo0202 above comment helped you, kindly mention here and close the issue. Otherwise this package is designed to work with ant design and not with any other ant design related project.

[William Cai]

Hey, I have the same issue while trying to using this plugin with antd-mobile. Seems there's no colorPalette in the ant design mobile version. So, I think this plugin may not work for antd-mobile yet.

[Zohaib Ijaz]

You can try copying colorPalette code from ant design source code and put it in your main.less file

[Marzuk Kamal]

it seems that it only happens when antd.less is imported in multiple .less files. if I import antd.less in only one less file (say App.less), the problem disappears!