How to make gatsby generate separate css for each static page?

[BlindDespair]

Summary

We have a pretty large project with 200+ pages and a lot of components. We used typestyle in the past but we decided to move to scss because we had a performance problem styles taking too much time on initial load. Problem is that all styles of the site from all pages were inlined into a single <style> tag. Unfortunately the problem persisted after moving to scss. We have exactly same issue now, all styles are inlined. We are using scss modules so that all styles have unique ideas per component, but still we want a faster load time.

The solution we want to see is that each page would only get styles that are imported in the components used on that page + global styles. When navigating to next page styles should be lazyloaded just like javascript bundle. Is there a way to achieve this now in gatsby?

[herecydev]

All css is intentionally bundled into one style tag. If you haven't read it already this issue covers the rationale.

I'm unsure of how to prevent that happening, the changes that made it happen are here. A more official method might be beneficial for people if they understand the consequences.

@KyleAMathews to quote you:

We could document how to restore code splitting if people did know that was happening and wanted it. Then it's on them to deal with implications.

[vladar]

Yep, here is a relevant part of the webpack config:

gatsby/packages/gatsby/src/utils/webpack.config.js

Lines 495 to 507 in 329650b

	// Only create one CSS file to avoid
	// problems with code-split CSS loading in different orders
	// causing inconsistent/non-determanistic styling
	// See https://github.com/gatsbyjs/gatsby/issues/11072
	styles: {
	name: `styles`,
	// This should cover all our types of CSS.
	test: /\.(css|scss|sass|less|styl)$/,
	chunks: `all`,
	enforce: true,
	// this rule trumps all other rules because of the priority.
	priority: 10,
	},

Seems that the only way to switch to multiple CSS files is by setting custom webpack config.

But there is an existing plugin gatsby-plugin-split-css that does exactly this.

[BlindDespair]

@vladar I tried the plugin and it does exactly what we need, thank you. The reason why we are not worried about style order is because we are using scss modules and our components have unique css classes anyway. We only have 1 global stylesheet which is okay to override by local styles.

[LekoArts]

Thank you for opening this!

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[ericmasiello]

Does anyone have a link to a repository where gatsby plugin split css is working? I just tried it on my repo using *.scss imports and I was seeing styles from other pages polluting each page.

[critesjm]

@ericmasiello that's the bug they linked to (#11072) above in explaining why the styles aren't split by default anymore.

[sachin04y]

I am trying gatsby plugin split css and it is working but the only issue is that it is not including the styles like - ../styles/App.scss. It is only working for css modules