How to not to separate css styles from shared component to other lazy loaded chunks

59 Views Asked by At

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?

0

There are 0 best solutions below