Webpack多次導入相同的樣式

我注意到，我的webpack配置在頭文件<style>中多次導入相同樣式，當我在@ssport文件中導入樣式時。Webpack多次導入相同的樣式

我想這是因爲我的全局樣式文件，它看起來像這樣的：

@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 
@import '~material-design-lite/src/material-design-lite.scss';

我以後導入的樣式在多個其他組件樣式文件：

@import 'global';

有沒有我錯過的配置？
我想我可以通過導入在index.js文件中導入全局樣式文件，但這些導入必須先到達，並且不知何故我無法通過webpack實現這一點。

試着將你的mixins /變量分隔成一個單獨的'.scss'，你可以分別導入你的全局和你的組件。 – ctrlplusb

我使用節點模塊包中的mdl（材料設計語言）提供的變量。我無法拆分該文件不幸 –

他們是不是單獨暴露變量？檢查節點模塊dir – ctrlplusb

這不是webpack的問題，更多的是使用CSS。由於CSS資產是靜態編譯的，每個導入global的樣式表都有一個副本。您可以使用Less和@import (reference) statement，或者如果您更喜歡CSS，請單獨加載，並且不要每次都導入它。

2016-09-24 10:45:32 eavidan

sass可以達到同樣的效果嗎？ –

不是我所知道的。我對sass所做的只是導入帶有變量定義的scss文件，因爲這是導入應用程序中任何內容的唯一真正原因。除此之外，只需在主應用程序或scss文件中導入每個（外部）樣式表。 – eavidan

好吧，現在，我認爲，你是對的。也許這是我第一次使用導入不正確 –

我想這是因爲你已經命名文件global.scss而不是_global.scss。下劃線告訴譯員，這是一個部分，而不是爲它創建一個文件。

2016-09-25 12:30:40

回答