将样式封装在Less的body中导致React Bootstrap Modal样式异常

问题背景 #

基于React+Less+Webpack维护的老项目，为避免微前端场景下样式被其他应用覆盖，我将styles/main.less中的所有import语句包裹在了body选择器内部，其中components/common/main.less引入了React Bootstrap Modal的相关样式文件。

现象对比 #

• 不包裹body时：Modal类的源CSS文件显示为_modal.less，所有样式均正常应用
• 包裹body时：Modal类的源CSS文件显示为main.less，部分嵌套样式（如button&这类选择器）丢失

排除的方案 #

未采用以下方案：

• styled-components/CSS Modules：项目是老Less项目，大规模重构成本过高
• Shadow DOM：会引发点击失效等已知Bug，不符合项目需求

解决方案 #

暂未明确样式丢失的根本原因，但通过Webpack为Less文件统一添加全局包裹类以提升CSS优先级，成功解决了样式丢失和被覆盖的问题。

内容的提问来源于stack exchange，提问作者bakrall