Webpack 多次導入相同的樣式

Question

我注意到，當我在 sass 文件中 @import 樣式時，我的 webpack 配置多次將相同的樣式導入到 head <style>標簽中。

我認為這是因為我的全局樣式文件是這樣的：

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

我后來在多個其他組件樣式文件中導入樣式：

@import 'global';

有沒有我錯過的配置？
我以為我可以通過 import 導入 index.js 文件中的全局樣式文件，但是這些導入必須首先出現，不知何故我無法通過 webpack 實現這一點。

Answer 1

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

Answer 2

我認為這是因為您將文件命名為global.scss而不是_global.scss 。 下划線告訴轉譯器這是部分文件，而不是為其創建文件。

Answer 3

用新的@use替換@import並且所有東西都應該只導入一次

https://sass-lang.com/documentation/at-rules/import

Answer 4

Sass 中的 @import 將從 2022 年開始折舊，但新的 @use 旨在解決此問題。

如果你有一個依賴全局變量（顏色、斷點等）的大文件系統，它似乎有缺點，雖然我還沒有讓它在我的工作系統上工作，如果你有一個較小的文件系統，它絕對值得一看進入@use 和@forward。

看起來將您的 @import 更改為 @use 肯定會解決您的重復問題。