Using antd less variables in components

[nerdess]

I am customizing my ant design app using craco-antd which works very well :)

Now I'd like to use antd less variables inside the various .less files of my components. So that I can do stuff like e.g:

.card { padding-top: @padding-md; }

I am able to get it to work when I add

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

at the top of each .less file that uses an antd variable but that seems quite cubersome. Is there no way to add the variables globally?

[floatrx]

add the variables globally?

I prefer SASS\SCSS instead of LESS. I use craco-sass-resources-loader for that.

my config be like:

module.exports = {
  ...
    {
      // https://www.npmjs.com/package/craco-sass-resources-loader
      plugin: sassResourcesLoader,
      options: {
        resources: './src/styles/core.scss',
      },
    },
  ],
};

core.scss

@import "variables.app";
@import "mixins";
@import "helpers";
@import "animations";

Just replace sass with less & google

Try craco-plugin-style-resources-loader