Angular Module Federation微前端构建问题：styles.scss未打入main.js

核心原因 #

你的预生产构建配置里有两个关键参数导致全局样式丢失：

1. keepStyles: false：该配置会强制构建工具把CSS从JS bundle中提取为单独的.css文件，而非内联到main.js里。微前端集成时如果没有加载这个独立的CSS文件，就会出现样式缺失。
2. singleBundle: true：虽然配置了打包为单个bundle，但keepStyles: false会覆盖这个行为，优先执行CSS提取逻辑。

解决方案 #

方案1：让CSS内联到main.js中 #

修改预生产配置里的keepStyles为true，这样构建时会把全局样式保留在JS bundle里，随main.js一同加载：

"preproduction": {
  "aot": true,
  "buildOptimizer": true,
  "optimization": true,
  "sourceMap": false,
  "namedChunks": false,
  "extractLicenses": true,
  "vendorChunk": false,
  "keepPolyfills": false,
  "keepStyles": true, // 修改此参数
  "singleBundle": true,
  "outputHashing": "none",
  "extraWebpackConfig": "projects/my-webco/webpack.prod.config.js"
}

方案2：手动加载提取的CSS文件 #

如果必须保留keepStyles: false，需要确保微前端集成时加载生成的独立CSS文件：

• 构建完成后，dist/my-webco目录下会生成类似styles.css的文件
• 在宿主应用加载该微前端时，通过动态创建<link>标签加载这个CSS文件，或者在微前端的bootstrap阶段手动引入

额外检查点 #

• 确认webpack.prod.config.js中没有额外配置MiniCssExtractPlugin这类CSS提取插件，避免和Angular的构建配置冲突
• 验证构建产物：修改配置后重新构建，查看main.js内是否包含styles.scss的CSS代码，或者确认生成的CSS文件路径正确

内容的提问来源于stack exchange，提问作者UserRomain1234