webpacklessantdless-loader

Customizing Ant Design's theme: what exactly is that 'hack' key in the 'modifyVars' option of less-loader?

I've been customizing Ant Design's theme recently for a project, and it's going ok. However, I am intrigued by this approach presented in the docs (https://ant.design/docs/react/customize-theme#Customize-in-webpack):

{
  loader: 'less-loader', // compiles Less to CSS
  options: {
    modifyVars: {
      'hack': `true; @import "your-less-file-path.less";`, // Override with less file
    },
  javascriptEnabled: true,
},

And specifically this line: 'hack': `true; @import "your-less-file-path.less";

I understand that modifyVars leverages a feature of Less (http://lesscss.org/usage/#using-less-in-the-browser-modify-variables), but I could not find any mention of this hack key either in Less, less-loader or Ant Design documentation and source code.

It kind of understand that it is writing an import in the source less styles to override the default theme, but I would love to actually know what it happening.

Would anybody be able to explain it exactly, or point me to the right resource to understand it?

Solution

  • I'm not quite sure, I tried debugging for a while, and found hack is not important, and the true is also useless.

    for example:

    'any_word_you_like': `; @import "your-less-file-path.less";`

    but, the ; is important。

    The relevant code is at https://github.com/less/less.js/tree/master/packages/less/src/less/parser, and the relevant parsing logic I haven't understood