如何在styles.scss中加载single-spa微前端的自有静态资源？

问题表现 #

• 基于Angular 12开发的single-spa子应用中，全局styles.scss文件内通过相对路径引用的静态资源，请求时默认指向根宿主应用的URL路径，加载404
• 组件内独立scss文件中，通过相对路径引用的静态资源可正常从子应用自身路径加载，无异常
• 两类样式文件的资源引用写法均为标准相对路径，代码示例：
  全局styles.scss：

  .sample {
    background-image: url('./assets/img/SAMPLE.png');
  }
  

  组件app.component.scss：

  .sample-two {
    background-image: url('../assets/img/SAMPLE.png');
  }
  

• 两类资源的请求路径差异参考截图：

已验证无效的方案 #

• 启动ng serve时添加--deploy-url参数、在应用中正确配置APP_BASE_HREF依赖注入项，问题依旧
• single-spa模式下子应用采用@angular-builders/custom-webpack:dev-server作为构建服务时，angular.json > architect.build.options下配置的baseHref、deployUrl属性不生效
• 配置已在高版本Angular中移除的rebaseRootRelativeCssUrls项，构建/启动阶段直接抛出错误，无法使用

方案约束 #

子应用必须保留独立启动、独立运行的能力，自有静态资源仅存放在子应用项目目录内，禁止将资源复制到根宿主项目、禁止硬编码绝对URL引用资源，避免多项目重复维护资源。

修复方案 #

问题根因是Angular构建时会将全局样式抽取为独立CSS文件，默认资源解析的publicPath指向站点根路径；而组件样式会被编译为JS模块内的样式代码，资源路径跟随JS模块的publicPath解析，因此能正确匹配子应用路径。
可通过自定义webpack配置修复，无需修改现有业务样式代码：

1. 确认项目已安装与当前Angular版本匹配的@angular-builders/custom-webpack依赖
2. 在项目根目录创建自定义webpack配置文件extra-webpack.config.js，强制指定全局抽取CSS的资源解析路径：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 可根据启动环境变量动态切换路径，独立启动时传'/'，single-spa挂载时传对应子应用的路径前缀
const cssPublicPath = process.env.IS_SINGLE_SPA ? '/your-micro-app-prefix/' : '/';

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[name].css',
      publicPath: cssPublicPath
    })
  ]
};

3. 在angular.json中对应构建配置项里，移除之前配置的deployUrl、baseHref属性，避免和自定义webpack配置冲突，指定customWebpackConfig路径：

{
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./extra-webpack.config.js"
        }
      }
    },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server"
    }
  }
}

4. 配置启动脚本，通过环境变量区分启动模式（需提前安装cross-env兼容跨平台环境变量配置）：

{
  "scripts": {
    "start": "ng serve",
    "start:single-spa": "cross-env IS_SINGLE_SPA=true ng serve"
  }
}

如果不想修改webpack配置，也可以将全局styles.scss中所有相对路径的资源引用，替换为以src/开头的全路径写法（例如url('src/assets/img/SAMPLE.png')），Angular构建时会自动将该类路径解析为正确的子应用资源路径，缺点是需要手动修改全局样式中的所有资源引用。

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