Upgrading to Gatsby 2.1 breaks multiple stylesheet output (via custom webpack config)

[gjhltn]

I have code in gatsby-node.js that patches the WebPack config to output multiple css files -

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

exports.onCreateWebpackConfig = ({
  actions,
  stage,
  getConfig
}) => {
  actions.setWebpackConfig({
    plugins: [new MiniCssExtractPlugin({ })],
  })
  if (stage.includes('javascript')) {
    let config = getConfig()
    config.entry["theme-a"] = './src/css/entry-points/theme-a.css'
    config.entry["theme-b"] = './src/css/entry-points/theme-b.css'
    actions.replaceWebpackConfig(config)
  }
}

Under gatsby 2.0.17 this builds two css files in /public, theme-a.css and theme-b.css.
Under gatsby 2.1.n this builds one file, styles.css.

If I just log out the config to the console, it's the same in each...

Is this expected? If so, any ideas how I could get the old behaviour back? Any help where I could start looking for what's changed?

[krismorf]

Hi @gswirrl see here the related PR #11800 and issue #12018

[gjhltn]

Hi @krismorf (amazingly quick and spot-on reply! thank you :-)
ah - understood. Is there a way I can work around it?

(@KyleAMathews in #11800 )

We could definitely document how to re-enable CSS splitting — let's see if anyone asks for it first though.

:hopeful-face-emoji:

thanks so much for the help

[gjhltn]

Minimal demo of the issue: https://github.com/gswirrl/gatsby-multiple-stylesheet

[gjhltn]

FIXED?

Problem is the new

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

Line 399 in 0a3705f

styles: {

My hacky solution (in gatsby-node.js) is to just stomp config.optimization.splitChunks.cacheGroups.styles

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

exports.onCreateWebpackConfig = ({
  actions,
  stage,
  getConfig
}) => {
  actions.setWebpackConfig({
    plugins: [new MiniCssExtractPlugin({

    })],
  })
  if (stage.includes('javascript')) {
    let config = getConfig()
    config.entry["theme-a"] = './src/css/theme-a.css'
    config.entry["theme-b"] = './src/css/theme-b.css'

    // override default output to styles.css
    config.optimization.splitChunks.cacheGroups.styles = {}

    actions.replaceWebpackConfig(config)
  }
}

(im rigging the hard drives to wipe themselves when the law of demeter police kick the door down)

Seems to work? May have unintended drawbacks!?!? :-)

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gjhltn]

I think this is still fresh! Sorry.

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!