how to modify theme variables at run time

[ahmedB7r]

i can't use less.modifyVars less is not defined message error

[SolidZORO]

@ahmedB7r Is the problem solved now? Try upgrading the plugin, or give me some error messages.

[ahmedB7r]

@SolidZORO yes, I upgraded it now, and still, I don't know how to modify primary color for example at run time with antd and next js for the error message just this Uncaught ReferenceError: less is not defined less is not in my global variable please if u have like demo can change the primary color with antd and next js at run time, share it with us :)

[SolidZORO]

if your modifyVars has some vars. then these variables can't modify in run time. you can try remove these. use file vars Instead.

[ahmedB7r]

 lessVarsFilePath: "./public/static/antd-custom.less",
  cssLoaderOptions: {
    esModule: false,
    sourceMap: false,
    modules: {
      mode: "local",
    },
  },

I'm using file vars exactly like the demo

[jernkuan]

Thanks for this plugin, but I had to swap this,

https://github.com/SolidZORO/next-plugin-antd-less/blob/master/overrideWebpackConfig.js#L164

to be

    content = `${content}\n\n@import '${lessVarsFileResolvePath}';`;

for the primary colors variables not to be overridden by the original content.

[SolidZORO]

@jernkuan Hi, I added a options lessVarsFilePathAppendToEndOfContent to v1.1.3

[wevertoum]

change theme dynamically in my application dont work cause i can't set new value for a Less variable, I love this plugin, it would be awesome to change value Less variables at runtime like is possible in CRA using the plugin customize-cra

[SolidZORO]

@wevertoum

// next.config.js
const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  // optional
  modifyVars: { '@primary-color': '#04f' },
  // optional
  lessVarsFilePath: './src/styles/variables.less',
  // optional
  lessVarsFilePathAppendToEndOfContent: false,  <--- changed this?
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions: {},

  // Other Config Here...

  webpack(config) {
    return config;
  },

  // ONLY for Next.js 10, if you use Next.js 11, delete this block
  future: {
    webpack5: true,
  },
});

[wevertoum]

Hi, i fix my problem more quickly with this package

thanks :)