如何将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>元素，但是我建议您不要进行一些性能评估。