[micro-app] app xxx: An error occurred while parsing CSS: Error: selector missing

[niuchunling]

问题描述

主应用使用 Vite 构建，子应用使用 Webpack 构建。当主应用加载 Webpack 子应用时，micro-app 的 CSS 解析器报错：
[micro-app] app spotlightAIP: An error occurred while parsing CSS:
Error: selector missing
at parseError (@micro-zoe_micro-app.js?v=95806d4a:584:15)
at CSSParser.printError (@micro-zoe_micro-app.js?v=95806d4a:899:7)
at CSSParser.matchStyleRule (@micro-zoe_micro-app.js?v=95806d4a:636:19)
at CSSParser.matchRules (@micro-zoe_micro-app.js?v=95806d4a:627:97)
at CSSParser.exec (@micro-zoe_micro-app.js?v=95806d4a:615:10)
at commonAction (@micro-zoe_micro-app.js?v=95806d4a:908:23)

复现步骤

1.主应用 配置 micro-app 加载子应用
2.子应用 使用 Webpack 构建，包含 Less 样式
3.主应用启动后访问子应用页面
4.控制台出现 CSS 解析错误

环境信息:

主应用框架: Vite 5.4.0 + React 18.2.0
子应用框架: Webpack 5.40.0 + React 18.2.0
micro-app 版本: @micro-zoe/micro-app 1.x
样式方案: Less 4.2.0 + CSS Modules
CSS 压缩插件: css-minimizer-webpack-plugin

主应用配置:
// src/index.tsx
import microApp from '@micro-zoe/micro-app'

microApp.start({
'disable-memory-router': true,
'disable-patch-request': true,
})

<micro-app
name={name}
url={url}
baseroute={baseroute}
style={{ height: '100%' }}
shadowDom={false}
iframe={false}
/>

子应用 Webpack CSS 配置:
optimization: {
minimize: isProd,
minimizer: [
new TerserPlugin({...}),
new CssMinimizerPlugin(), // CSS 压缩
],
}

已尝试的方案:

1. 禁用 CSS 压缩 - 无效 // 注释掉 CssMinimizerPlugin()
2. 全局禁用 CSS 作用域 - 有效，但会失去样式隔离
   microApp.start({
   'disable-scopecss': true, // 有效，但不可接受
   })
3. shadowDom 有效不可接受

期望行为:

micro-app 的 CSS 解析器应能正确解析 Webpack 构建的标准 CSS，保留样式隔离功能。

[github-actions]

Hello @niuchunling. In order to facilitate location and troubleshooting, we need you to provide a realistic GitHub repository.
您好 @niuchunling, 为了方便定位和排查问题，我们需要您提供一个重现实例，请提供一个尽可能精简的 GitHub 仓库地址。