按需導入LESS文件

Question

SHORT：僅當函數/變量尚未定義時，是否可以按需導入較少的文件？

LONG：我們假設我的LESS文件包含我的頁面樣式。我們稱之爲styles.less。另外，我還有5個LESS文件。那裏的每個人都包含通用的設計原語，例如我在許多項目中使用的信息框的設計 - 這就是它沒有合併到styles.less的原因。我們假設它叫.infobox {}。
然後，當.infobox沒有在styles.less中找到時，是否有可能「嘗試」導入5個文件？我對編譯通過lessc（節點模塊）和Web瀏覽器中的「即時」編譯感興趣。

我希望我的例子足以說明情況 - 如果沒有，請隨時發表評論，我會編輯問題以提供更多信息。

Answer 1

我一直無法找到一種方法來使其完全自動化。我也不知道您是否希望使用此功能來減少@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即可，無需任何額外的混合檢查。唯一真正的價值是它設置了一部分變量，基本上告訴編碼器：「嘿，如果你沒有在這裏包含它，那麼就有可以加載這個功能的模塊;所以告訴我，你是否包括它？」

同樣，我不確定這是否完全解決了你要做的事情。我提供了它，因爲它在某些情況下可能對某些人有用。