Css pollution problem

there are two React projects An and B, Project B is a public project, and Project A depends on Project B.
they all rely on the antd component library, but with different versions.

now the way to use B in An is to build, first and then introduce:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>app</title>
    <link rel="stylesheet" href="path/to/project/B.css" />
    <link rel="stylesheet" href="path/to/project/A.css" />
</head>

<body>
    <div id="root_a"></div>
    <div id="root_b"></div>
    <script src="path/to/project/bundleB.js"></script>
    <script src="path/to/project/bundleA.js"></script>
</body>

</html>

the problem is that both A.css and B.css contain antd.css, that can cause pollution. But because the version is different, we can"t just quote one.

trying to wrap a layer of Id, around project B antd.css is similar to -sharproot_b .antd _ xxx {} , but it doesn"t seem to work:

// b_index.less
-sharproot_b{
    @import "~antd/dist/antd.css";
    
    //
}

find a solution ~


1. If you say that Project A depends on Project B and Project B is a public project, see if you can dynamically use different versions of antd referenced versions when loading A;
2. Basically, it's best to separate or use the same version of the repository

.

ps: No matter what you do, even if you solve a short-term problem, it is not a long-term solution, and it will lead to a lot of more complex style problems. Therefore, it is recommended that you take a long-term view, since it is a mutually exclusive relationship, then to the point, An and B separate warehouses do not rely on, or merged into one.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1becae0-31b11.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1becae0-31b11.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?