How to use Webpack so that css can only be used by a single component

for example, I have two components An and B. How do I get component A to use only A.less , and component B to use only B.less . Because they all have the same class name.
it is known that CSS Module is available. I"d like to know if there are any plug-ins.

A.tsx

import "./A.less";
....
render() {
    return <div className="test"/>
}

A.less

.test{
   color: "red";
}

B.tsx

import "./B.less";
render() {
    return <div className="test"/>
}

B.less

.test{
    color: "blue";
}

Css-modules webpack css front-end

Aug.17,2021

the root elements of different components have different class names. For example:
A component

<div className="com-a">
    <div className="test"></div>
</div>

.com-a {
    .test {}
}

B component

<div className="com-b">
    <div className="test"></div>
</div>

.com-b {
    .test {}
}

css module can be opened directly in css-loader

if css module is not enabled, you can only put another class on the outermost layer to distinguish the styles of different components

Previous: Parent and child components pass values?

Next: Docker nginx swoole reverse proxy