使用 Webpack 如何让 css 只能单个组件使用

Question

比如我有两个组件 A， B。 我要怎么让组件A 只使用 A.less, 组件B 只使用 B.less 呢。因为都有相同的类名。
目前已知可以用 CSS Module，想问一下有没有插件之类的。

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';
}

Answer 1

不同组件的根元素起不同的类名。比如：
A组件

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

.com-a {
    .test {}
}

B组件

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

.com-b {
    .test {}
}

Answer 2

css module 可以直接在 css-loader 中开启

不开启css module的话，只能在最外层再放一个class来区分不同组件的样式