sass plugin: use existing extract plugin for current stage

[erquhart]

For styles affecting the main chunk, we need to reuse the extract plugin instance created in Gatsby's webpack config, otherwise the new instance will overwrite the output of Gatsby's instance.

Fixes #4457

[gatsbybot]

Deploy preview for gatsbygram ready!

Built with commit 9e9a157

https://deploy-preview-4495--gatsbygram.netlify.com

[gatsbybot]

Deploy preview for using-drupal ready!

Built with commit 9e9a157

https://deploy-preview-4495--using-drupal.netlify.com

[KyleAMathews]

Thanks for sticking through to the bitter end :-)

[erquhart]

Yeah, not sure it's over yet. Opening an issue to cover the underlying problem implicated here.

[robbyemmert]

So... Is this fixed?

[erquhart]

@robbyemmert the big picture issue that I created after that last comment is #4516, you can get all the details there. Basically it's fixed for Sass, except for some kind of Windows issue that I can't really help much with, and at some point other css preprocessor plugins should also be updated to use the method implemented in #4532 and #4559.

Are you experiencing a related issue?

[robbyemmert]

Yes. I'm running Mac OS 10.13.4, gatsby ^1.9.202, and gatsby-plugin-sass ^1.0.25. I solved the problem temporarily by forcing gatsby-plugin-sass to version 1.0.19.

I have actually run into a few issues where gatsby's webpack architecture doesn't support things I need to do. I am wondering if maybe my use case is beyond gatsby, and if I should just write my own webpack. I'm curious what you think. I need to:

• Specify custom babel settings (i.e. support for generators and async/await)
• Inject history (route information) into redux (currently the documented way to integrate redux doesn't allow this)
• Use sass styles in production (I currently need to use the workaround above)
• Adding custom webpack entries (i.e. babel-polyfill)

It seems to me, as a new gatsby user, that gatsby is really an opinionated starter for beginners, to get started quickly (which it does unbelievably well), but it really doesn't have robust support for custom configurations or advanced webpack features. If I want to use these things, I may be better off just writing my own webpack.

Do you think I'm on the right track, or am I misunderstanding what gatsby is for?

[KyleAMathews]

You can change anything you'd like about webpack — https://www.gatsbyjs.org/docs/add-custom-webpack-config/

To add babel plugins — add a .babelrc.

Updating Redux should be easy with https://www.gatsbyjs.org/docs/browser-apis/#onRouteUpdate

Gatsby isn't a starter or boilerplate for webpack — it's a React static site generator — it goes far beyond being a simple webpack tool as it provides ways to source/transform data from any where + create optimized production builds.

Sorry you're having trouble! Bugs happen and we'd love your help fixing them. But there should be all the APIs you need to do what you need.

[erquhart]

Seconded, there isn't much you can't do with Gatsby.

_{Sent with GitHawk}