Skip to content

Css

Jump to bottom
Adolph-WSY edited this page Sep 6, 2021 · 2 revisions

[TOC]

CSS 打包模块

本方案旨在保证 Remote 打包生成的相关 Style 可以被 Host 端引用，以及 Remote Components 样式得以渲染。关于 Host、Remote 重叠 Style 污染问题，需要结合 Scoped 或 CSS Modules 方案进行样式的模块化，无法直接通过 vite-plugin-federation 进行保证

整体逻辑

federation

  • 在 Hook generateBundle 中分析编译完成的文件中 Style 与 JS 关系
    • build.cssCodeSplit: false 时，Vite 将所有 Style 打包到style.xxxxxxxx.css文件中
    • build.cssCodeSplit: true 时
      • 当前 Remote 只有一个 Component，Vite 会将其打包为 RemoteSimpleButton.xxxxxxxx.js 引用 Button.xxxxxxxx.js 使用 Button.xxxxxxxx.css
      • 当前 Remote 多个 Component，Vite 会将其打包为 RemoteSimpleButton.xxxxxxxx.js 使用 RemoteSimpleButton.xxxxxxxx.css

针对以上三种场景进行针对性处理。

局限性

  1. build.target: 'es2020'
  2. 必须在 module 中
  3. CSS 样式污染问题，扔需要 Remote 自行使用方案进行解决，建议避免在 component 中使用全局样式。当前 vue2-demo 使用的 CSS Modules 方案、CSS Scoped 方案均无法解决 Remote 携带的全局 CSS 样式导致 Host 样式污染的问题
Clone this wiki locally