I have a problem using "mini-css-extract-plugin". So I have 2 different lazy loading fragments in my router.
{path: '/lazy', element: (
<LazyLoad
render={(Component) => <Component />}
load={() => import(/* webpackChunkName: "LazyLoadChunk" */ '@client/modules/pages/Lazy/Lazy')}
/>
)},
{path: '/lazy1', element: (
<LazyLoad
render={(Component) => <Component />}
load={() => import(/* webpackChunkName: "LazyLoadChunk2" */ '@client/modules/pages/Lazy2/Lazy2')}
/>
)},
And in both of them I imported a common component which is NOT USED BY ITSELF only in these two components. And "mini-css-extract-plugin" split its styles into both CSS fragments (to exclude it from the main fragment). How can I avoid this behavior without things like using a component in code without styles, etc.
I can't find information about splitting js using "mini-css-extract-plugin" in the documentation.
Code of the components:
import { LazyComponentShared } from '../LazyShared/LazyShared';
const LazyComponent = () => {
return (
<div'>
<LazyComponentShared />
</div>
);
};
export default LazyComponent;
css chunk content: {.msC9g_UqKpddScVimOYF{color:red;background:red;font-size:20px;height:20px;position:relative}
Lazy2:
import { LazyComponentShared } from '../LazyShared/LazyShared';
export const LazyComponent2 = () => {
return (
<div>
<LazyComponentShared />
</div>
);
};
export default LazyComponent2;
css chunk content: {.msC9g_UqKpddScVimOYF{color:red;background:red;font-size:20px;height:20px;position:relative}
Shared component:
import s from './LazyShared.module.scss';
export const LazyComponentShared = () => {
return (
<div className={s.helloWorld}>
Lazy COMPONENT shared
</div>
);
};
css:
:local {
.helloWorld {
color: red;
background: red;
font-size: 20px;
height: 20px;
position: relative;
}
}
how can we move this style to the main chunk?