Skip to content

Common styles not added to all bundles on entry points code split #626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
omarjov opened this issue Oct 19, 2020 · 4 comments · Fixed by #630
Closed

Common styles not added to all bundles on entry points code split #626

omarjov opened this issue Oct 19, 2020 · 4 comments · Fixed by #630

Comments

@omarjov
Copy link

omarjov commented Oct 19, 2020

  • Operating System: macOS Catalina
  • Node Version: v10.16.0
  • NPM Version: 6.11.3
  • webpack Version: 4.44.2
  • mini-css-extract-plugin Version: 1.0.0

Expected Behavior

I expect that common styles are included in every entry point css bundle where it's included.
Done according to this docs https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-css-based-on-entry

Actual Behavior

Styles are only included in one entry point.

Code

Code is the same as https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-css-based-on-entry

How Do We Reproduce?

  1. Create multiple entry points.
  2. Create component with scss style module.
  3. Use this component in two or more entry points.
  4. Styles of this component are in only one entrypoint
@cap-Bernardito
Copy link
Member

Unfortunately I am can not to reproduce the problem.
Please provide a minimally reproducible test repository.
When you provide the test repo I will reopen this issue.

@omarjov
Copy link
Author

omarjov commented Oct 20, 2020

Okey, here we go
https://github.com/omarjov/webpack-extract-css-issue

We have 2 entries - foo & bar and 1 common component Card
foo entry uses @loadable and two components inside are imported with webpackChunkName comment,
running webpack we get 4 css files:

  1. foo.css
  2. bar.css
  3. FooRouteA.css
  4. FooRouteB.css

I expect that we should get only 2 css files -

  1. foo.css - that contains foo.css + FooRouteA.css + FooRouteB.css
  2. bar.css

@omarjov
Copy link
Author

omarjov commented Oct 20, 2020

I am expecting that webpack chunks are all imported to the entry point css file. Many thanks!

@cap-Bernardito
Copy link
Member

Thanks for repo. The solution is shown in the link below. Please look there.
Closed favor #628

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants