3

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?

Mathieu
  • 725
  • 5
  • 19

1 Answers1

2

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

SONGJP
  • 334
  • 3
  • 8
  • Oh, very interesting, thank you! Maybe it is *actually* a hack and it exploits the `modifyVars` feature to arbitrarily inject the theme import in the compiled styles by creating a "fake" variable. – Mathieu Jan 14 '21 at 09:21