我最近一直在为一个项目定制Ant Design的主题,而且进展顺利。然而,我对文档中提供的这种方法很感兴趣(https://ant.design/docs/react/customize-theme#Customize-在webpack中(:
{
loader: 'less-loader', // compiles Less to CSS
options: {
modifyVars: {
'hack': `true; @import "your-less-file-path.less";`, // Override with less file
},
javascriptEnabled: true,
},
特别是这一行:'hack': `true; @import "your-less-file-path.less";
我知道modifyVars
利用了Less的一个功能(http://lesscss.org/usage/#using-浏览器中的less修改变量(,但无论是在less、less loader还是Ant Design文档和源代码中,我都找不到任何关于这个hack
键的提及。
它有点理解它是在用无源样式编写导入来覆盖默认主题,但我很想真正了解发生了什么。
有人能准确地解释它吗,或者给我指合适的资源来理解它吗?
我不太确定,我试了一段时间调试,发现破解并不重要,true也没用。
例如:
'any_word_you_like': `; @import "your-less-file-path.less";`
但是,很重要
相关代码位于https://github.com/less/less.js/tree/master/packages/less/src/less/parser,以及我还不了解的相关解析逻辑