如何将CSS保存在单独的文件中？

Question

By default Gatsby drumps all the css required on a given html document into its header making css caching impossible:

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

results in:

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

/styles.f6ce41623bc6fbf912c0.css contains exactly that stylesheet.

is there a way to keep foo.css and bar.css in separate files without loosing the ability to minify and autoprefix everything?

Answer 1

The functionality is called bundling , and Gatsby uses Webpack to do it. You could alter the Webpack configuration , but I'd say there is really no point in doing that.

Bundling and code-splitting resources is a crucial part of why Gatsby is so fast. By bundling the CSS for every page makes sure that only resources required by the current page are loaded. Gatsby also caches all of the resources it has loaded, so you don't need to worry so much about resource economy.

I found a code snippet from a Gatsby issue comment , which replaces inline <style> elements with <link> s, but I wouldn't recommend doing that without going through some performance measurement.