如何將CSS保存在單獨的文件中？

Question

默認情況下，Gatsby將給定html文檔所需的所有css敲入其標頭中，從而使css緩存無法進行：

import "./foo.css"
import "./bar.css"

結果是：

<style data-href="/styles.f6ce41623bc6fbf912c0.css">
  .foo{color:green}.bar{color:orange}
</style>

/styles.f6ce41623bc6fbf912c0.css包含該樣式表。

有沒有一種方法可以將foo.css和bar.css在單獨的文件中，而又不會失去縮小和自動前綴所有內容的功能？

Answer 1

該功能稱為捆綁 ，而Gatsby使用Webpack來做到這一點。 您可以更改Webpack的配置 ，但是我說這樣做真的沒有意義。

捆綁和代碼拆分資源是Gatsby如此之快的關鍵部分。 通過為每個頁面捆綁CSS，可以確保僅加載當前頁面所需的資源。 Gatsby還緩存了已加載的所有資源 ，因此您不必擔心資源經濟性。

我從Gatsby問題注釋中找到了一個代碼段，該代碼段用<link>替換了內聯的<style>元素，但是我建議您不要進行一些性能評估。