简短内容是否有可能仅在函数/变量尚未定义时“按需”导入较少的文件?
LONG: 假设我有包含页面样式的 LESS 文件。我们称它为 styles.less
。此外,我还有 5 个 LESS 文件。那里的每个人都包含通用设计原语,例如我在许多元素中使用的信息框设计 - 这就是它没有被合并到 styles.less
的原因。我们假设它叫做 .infobox {}
。
那么,当在 styles.less
中找不到 .infobox
时,是否有可能“尝试”导入这 5 个文件?我对通过 lessc(节点模块)进行编译和在网络浏览器中进行“即时”编译都很感兴趣。
我希望我的示例足以说明情况 - 如果没有,请随时发表评论,我将编辑问题以提供更多信息。
最佳答案
我一直没能找到使它完全自动化的方法。我也不知道您是否需要此功能以减少 @import
请求或只是减少最终 CSS 以不加载不需要的元素。
如果您不需要它完全自动化,并且您只是想减少生成的 CSS,并且您没有太多想要使用的类,那么您可以在您的styles.less
文件。
//have at the top of the file some variables set to 0 or 1 if the class
//is present or absent in that file
@usesClass-infobox: 0;
//set up a mixin to load it if NOT in the file
.setClass-infobox(@set) when (@set = 0) {
@import 'infobox.less';
}
//a default mixin to do nothing otherwise
.setClass-infobox(@set) {}
//call the mixin
.setClass-infobox(@usesClass-infobox);
当然,这并不能真正帮助流程自动化。毕竟,如果您知道 .infobox
不在 styles.less
文件中,那么您只需添加 @import
即可,无需任何额外内容混音检查。这给出的唯一真正值(value)是它设置了一个变量部分,基本上通知编码器“嘿,如果你不在这里包含它,可以为这个功能加载模块;所以告诉我,你是否包含它?”
同样,我不确定这是否完全解决了您的问题。我提供它是因为它在某些情况下可能对某些人有用。
关于css - 按需导入 LESS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14415586/