Unable to use custom vars in .less root file

[MaxDNG]

Hi all,

I have been using craco-antd for our app and recently I started having issues with less compilation. Basically, it generates two copies of the antd css, one with my custom colours, one with the default. The default being generated last, it overrides my custom settings.

The way I have been doing it so far might not be canonical but I needed to do it like that. Here is what I have in the less root file

@import 'antd/dist/antd.less';

@link-color: #ff0000;
@primary-color: #00ff00;

This used to work fine until recently. Maybe linked to upgrade to craco-less 2.0 but not sure.

What is weird is that if I use craco-less instead, it works fine. To be clear, this works:

const CracoLessPlugin = require('craco-less');

module.exports = function cracoConfig({ env }) {
  return {
    plugins: [
      {
        plugin: CracoLessPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      },
    ],
  };
};

But this fails:

const CracoAntDesignPlugin = require('craco-antd');

module.exports = function cracoConfig({ env }) {
  return {
    plugins: [
      {
        plugin: CracoAntDesignPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      },
    ],
  };
};

Here is a small reproduction repo from a brand new create-react-app: https://github.com/MaxDNG/craco-antd-issue

I try to find the issue but did not succeed so far. Will keep looking later on.

[Laguigue]

I had the exact same problem, and this is how i just fixed it:

I found out that, somehow, in addition to importing the antd.less file into my root file App.less, I was also importing 'antd/dist/antd.css' 'inside of one of my react component. It was obviously a mystake so i got rid of it, and it started to work fine again. Search for any import of antd/dist/antd.css you might have made, maybe you did the same mystake as i did.

Edit: you can then use craco-antd instead of craco-less