Module-federation에서 host와 remote에 같은 이름에 SCSS Variable이 있으면 어떻게 적용될까?

TL;DR

각자 독립된 scope에서 서로 다르게 반영되어 동작함.

검증

• remote
  _variables.sass

  ...
  $primary: #d3ca5f;
  ...

• host
  _variables.sass

  ...
  $primary: #e41485;
  ...

• webpack.config.js(remote, host 양측 동일)

   css: {
     loaderOptions: {
       sass: {
         additionalData: `
             @import "@/assets/styles/_variables.scss";
         `,
       },
     },
     sourceMap: true,
   },
  

왜

webpack에 의해 번들링될때 scss의 variables($primary..)들이 컴파일 타임에 반영되기 때문