Encapsulating styles in less causes problem in styles of react bootstrap modal

Question

I am tackling quite a problem in the React app that I have not yet come to fully understand. What happens is that I have less files which I process with webpack and the styles/main.less is loaded in app.tsx. The content of this main.less is like this:

//encapsulated in body to protect styles from being ovewritten by other microfrontends

body {
  @import 'normalize';
  @import 'colors';
  @import 'components/common/main';
} 

In components/common/main.less I have imports of styles related to particular components, among them modal/main.less, which in its turn imports several less files related to react bootstrap modal.

When in the main less file of app, which is styles/main.less, I wrap the imports in body as shown above, then the output in dev console is different from when I don't wrap them in body. Differences are:

1. For imports not wrapped in body:

• source css files for a particular class of modal shows as '_modal.less'
• all relevant styles from '_modal.less' are applied

2. For imports wrapped in body:

• source css files for a particular class of modal shows as 'main.less'
• not all styles from '_modal.less' are applied, for example one onther selector button& is lost

Why is that happening? How come the encapsulation in one parent element changes the behaviour?

To answer ahead probably some suggestions, why I don't use styled component or css modules or shadow dom to encapsulate styles: firstly, it's very old project with styles written in less; as to shadow dom when used it causes unexpected bugs, with for example click handlers stopping to work.

MY SOLUTION: Actually, I still don't know the answer to why I had this issue, but I found a different way of raising specificity of css styles other than wrapping them in additional selector in main.less I used an answer from here Add wrapper class to less files using webpack and it works perfectly :)