main.css doesn't contain all css file when using code splitting

[yqz0203]

It seems that the css files are packaged into js chunk file，and generating a link url after chunk loaded.

Is there a way to put all css into main.css when using code splitting?

Thanks. :-)

[Timer]

This should happen in a production build, just not development; can you confirm?

Also, we need to know your react-scripts version, etc (issue template).

[yqz0203]

@Timer Yes, this happened in production build which I care about. The size of the generated main.css is only 7KB including normalize.css, because the icons and styles are packaged into chunk files, the chunk files are quite big, some files are even larger than 100KB.

I use import(*).then for code splitting at each route. If I don't use that, the styles are all packaged into main.css correctly.

My react-scripts version is 1.0.10

[Timer]

Hmm, this sounds like a bug but I'm not sure; I'll dig into this tonight.

[Timer]

/cc @gaearon is this the desired behavior? A bug with extract-text-webpack-plugin maybe?

[yqz0203]

@Timer I viewed the config code

    // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
    new ExtractTextPlugin({
      filename: cssFilename,
    })

the reason seems that a item named allChunks not be set.

the weback doc said that

Extract from all additional chunks too (by default it extracts only from the initial chunk(s))
When using CommonsChunkPlugin and there are extracted chunks (from ExtractTextPlugin.extract) in the commons chunk, allChunks must be set to true

should it be added and set true in the config by default ? or I should eject project and add it by myself?

[Altiano]

On production, everytime splitted chunk (component) is mounted, it will cause Flash of Unstyled component which really bad for UX.
The only solution for me is, from caller component, to define CSS animation transition from opacity 0 to 1 after few milliseconds.

[yqz0203]

@Altiano
I meet the same problem too, the worse problem is that in some place we need calculate an element's size, then do next works. So I have to set a timeout for getting the right size of an element. This makes my codes confusing...

Now I create a new git branch, then eject project and add allChunk:true to ExtractTextPlugin config for building. All css files are packaged into main.css correctly and everything works fine now.

[Timer]

See #2415; we're ok with setting allChunk to true; can you both confirm this fixes the flash of unstyled text?

[Altiano]

It is allChunks. Yes it works.

Probably deserve to be openned on another issue, I think it is really related and We all will face this problem eventually when using code splitting But I wonder how you @yqz0203 solve common module on child chunks using CommonsChunkPlugin?

[mhluska]

What's the status on this one? I'm experiencing this issue as well. Edit: nevermind, this issue only exists for me in dev because of style-loader. In prod, ExtractTextPlugin fixes it.

[bugzpodder]

Hey guys, this should be fixed with the mini-css-extract-plugin which we've added as part of webpack 4 in the next branch. I don't believe there will be any more releases for CRA 1.x. Please test the CRA2 release if possible, and open a new issue if you see something wrong.