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

God Beom·2022년 4월 20일
0

micro-frontend

목록 보기
1/5
post-thumbnail

TL;DR

  • 나중에 import된 CSS가 우선 적용됨.(덮어 씌움)
  • 우선순위 개발자가 조정 가능. : root async로 해결
  • CSS상 !important;로 가능하지만 권장하지 않음.

    comm

  • css
.test1 { font-size: 20px; color: blue;}
  • html
 <p class="test1">test class/ blue</p>

mall

  • css
 .test1 { font-size: 20px; color: red}
  • html
  <p class="test1">test class /red</p>

실행 결과 : comm(remote)의 CSS가 우선순위를 가져 mall(host)가 red로 지정 했지만 remote의 css가 우선순위를 가짐.

검증

  • remote(comm)
    webpack.config.js
      new webpack.container.ModuleFederationPlugin({
           name: "common",
           filename: "remoteEntry.js",
           exposes: {
             "./global.scss": "./src/assets/styles/global.scss",
           },
        ...
  • host(mall)
    main.ts
    import("common/global.scss") // Remote global css

    • remote로 부터 전달받은 css(global)이 lazy하게 반영 되었고 후행 반영되는 순간 덮어 씌워짐.
profile
의미있는10%코드를 위하여

0개의 댓글