Variables don't work

Hi,

I have the following build:

"antd": "^4.15.4"
"next": "10.1.3"
"next-plugin-antd-less": "^1.1.4"
"babel-plugin-import": "^1.13.3",
"babel-plugin-superjson-next": "^0.2.3",
"less": "^2.7.3",
 "@zeit/next-less": "^1.0.1",

my next.config.js file content:

const path = require(‘path’); const withAntdLess = require(‘next-plugin-antd-less’);

module.exports = withAntdLess({
    env: {
        STRAPI_API_URL: 'http://localhost:1337',
    },
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
    },
    // optional
    lessVarsFilePath: './styles/antd.variables.less',
    // optional
    lessVarsFilePathAppendToEndOfContent: false,
    // optional https://github.com/webpack-contrib/css-loader#object
    cssLoaderOptions: {},


    // Other Config Here...

    webpack: (config, {buildId, dev, isServer, defaultLoaders, webpack}) => {
        if (!isServer) {
            config.node = {
                fs: 'empty'
            }
        }
        return config
    },
});

.babelrc.js file is in place:

module.exports = {
    presets: [['next/babel']],
    plugins: [
        ['superjson-next'],
        ['import', { libraryName: 'antd', style: true }]
    ],
};

I have /styles/antd.less file, which I import as a global in my next js app. The content of this file:

@import “~antd/dist/antd.less”; @import “antd.app.less”;

/styles/antd.app.less file has my custom global styles

And /styles/antd.variables.less file has all variables I want to override (everything is set to red color for testing purposes):

@import '~antd/lib/style/themes/default.less';

@primary-color: #f00; // primary color for all components
@link-color: #f00; // link color
@success-color: #f00; // success state color
@warning-color: #f00; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(255, 8, 8, 0.85); // heading text color
@text-color: rgba(255, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(255, 1, 1, 0.45); // secondary text color
@disabled-color: rgba(255, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #ff0000; // major border color
@box-shadow-base: 0 2px 8px rgba(253, 0, 0, 0.15); // major shadow for layers

I’ve tried with @import '~antd/lib/style/themes/default.less'; and without it.

Same result all the time, variables are still have default values. Moreover, I have some weird behaviour of antd submenu component. It’s rendering all the elements correctly, when I hover the submenu it adds appropriate classes, but I cannot see submenu on the screen. Seems like styles are messed up, I don’t think it’s compiled correctly.

[SolidZORO]

@Sahejmaharjan1 https://github.com/SolidZORO/next-plugin-antd-less#️-faq

[Meansereirith]

@SolidZORO I got it working. The issue was I was using next-compose-plugins with next-images. The solution was next-images comes first then next-plugin-antd-less. Thank you so much for your assist.