我可以在Webpack中全局公開一個.less/.scss參考文件嗎？

Question

我們有一個使用Webpack和css模塊的項目。要應用範圍化的名稱空間，每個組件都有自己的.less文件。裏面那個.LESS文件，我們導入我們common.less文件的引用，所以我們可以使用它像這樣：

@import (reference) "../global.less"; 
.navbar { 
    .navbar; 
} 

這似乎很令人費解，但結果封裝類配對與它的組件，並允許其他開發無需使用React即可在內部使用global.less文件。

我的問題是，除冗餘類包裝之外，每一個導入這個相當大的global.less文件的組件似乎在我們的webpack構建中增加了將近一秒。

我很好奇，如果有一種機制，將允許我公開這些文件中引用global.less的內容？我發現Webpack可以填充js模塊。我基本上是在尋找一個.less或.scss等價物。

Answer 1

您可以添加commonChunkPlugin，然後將您的global.less路徑添加到它，這樣它將只在另一個js文件中編譯一次。

here