在安装到主机应用程序时，加载Micro Frontend root App组件在单打序列中的CSS组件

Question

同事！

需要一个建议！ SinglesPareact中的Micro Frontend不会在安装上加载root的组件CSS，而只能根据路由导航页面CSS。

使用单打序列实现了微观前端。在WebPack.config中用于DevMode构建使用：

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css',
    ignoreOrder: false,

  }),
  new ExposeRuntimeCssAssetsPlugin({
    filename: '[name].[contenthash].css',
  }),
],

我们使用CSS模块。 将我们的微型前端安装到主机应用程序时，已经遇到了问题：它不会加载root App组件的CSS。仅加载它通过路由导航到的页面。我们的切入点看起来像：

 const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return GlobalErrorBoundary
  },
})

export const { bootstrap, mount, unmount } = lifecycles

因此，root React组件是应用程序。它在每个组件中呈现一个带有某些CSS模块的组件树，但是CSS并未加载。我检查了如何在主机应用中应用CSS：它通过路由在导航时将页面CSS的“链接”标签添加到头部。 在我们的构建中有什么问题，可能会添加哪些额外的步骤来解决问题，即使“应用” root组件的CSS加载？ 非常感谢任何线索！

Answer 1

已经通过添加SinglesPacss模块解决了。

    
        const reactLifecycles = singleSpaReact({
          React,
          ReactDOM,
          rootComponent: App,
          errorBoundary(err, info, props) {
            return GlobalErrorBoundary
          },
        })
        
        const cssLifecycles =
          !getIsDevelopment() &&
          singleSpaCss({
            // cssUrls: [],
            webpackExtractedCss: true,
            shouldUnmount: true,
            timeout: 5000,
          })
        
        let bootstrap
        let mount
        let unmount
        
        if (getIsDevelopment()) {
          bootstrap = reactLifecycles.bootstrap
          mount = reactLifecycles.mount
          unmount = reactLifecycles.unmount
        } else {
          bootstrap = [cssLifecycles.bootstrap, reactLifecycles.bootstrap]
        
          mount = [
            // The css lifecycles should be before your framework's mount lifecycle,
            // to avoid a Flicker of Unstyled Content (FOUC)
            cssLifecycles.mount,
            reactLifecycles.mount,
          ]
        
          unmount = [
            // The css lifecycles should be after your framework's unmount lifecycle,
            // to avoid a Flicker of Unstyled Content (FOUC)
            reactLifecycles.unmount,
            cssLifecycles.unmount,
          ]
        }
        
        export { bootstrap, mount, unmount }