single-spa根配置应用CSS Grid布局样式及加载问题求助

一、Root-Config引入CSS出现404的解决方法 #

你在index.ejs中使用<link rel="stylesheet" href="./styles.css">引入CSS，但浏览器请求路径为http://localhost:9000/src/styles.css导致404，核心是静态资源路径配置问题，可通过以下两种方式解决：

• 调整静态资源位置与引用路径

  1. 将styles.css从src目录移动到项目默认的静态资源目录public下；
  2. 修改index.ejs中的link标签为绝对路径：<link rel="stylesheet" href="/styles.css">，直接指向public目录下的样式文件。

• 通过Webpack打包处理CSS
  若希望保留CSS在src目录，需配置Webpack打包样式文件：

  1. 安装依赖：npm install css-loader style-loader --save-dev；
  2. 在webpack.config.js中添加CSS打包规则：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
  };
  

  3. 在root-config入口文件（如src/root-config.js）中导入CSS：import './styles.css'，Webpack会将样式打包到输出文件中，避免404问题。

二、Utility应用导入CSS后Root-Config加载失败的解决方法 #

使用utility应用导入CSS后出现root-config加载失败，多为导入映射配置或utility应用打包/注册问题，可按以下步骤排查：

• 检查导入映射配置
  确保导入映射中utility应用的路径、文件名与实际打包输出一致，示例配置：

  <script type="systemjs-importmap">
    {
      "imports": {
        "@your-org/utility-app": "http://localhost:9001/dist/your-org-utility-app.js",
        "@your-org/root-config": "http://localhost:9000/dist/your-org-root-config.js"
      }
    }
  </script>
  

  注意核对应用端口、打包后的文件名是否正确。

• 修正Utility应用的Webpack配置
  utility应用需输出UMD格式以适配single-spa，在webpack.config.js中配置：

  module.exports = {
    output: {
      filename: "your-org-utility-app.js",
      libraryTarget: "umd",
      library: "@your-org/utility-app",
    },
  };
  

• 完善Utility应用的生命周期导出
  即使是纯样式的utility应用，也需导出single-spa要求的空生命周期函数，示例：

  import './styles.css';
  
  export const bootstrap = async () => {};
  export const mount = async () => {};
  export const unmount = async () => {};
  

• 配置Root-Config对Utility应用的依赖
  在root-config的应用注册代码中，添加对utility应用的依赖声明，确保加载顺序正确：

  registerApplication({
    name: "@your-org/root-config",
    app: () => System.import("@your-org/root-config"),
    activeWhen: ["/"],
    dependencies: ["@your-org/utility-app"]
  });
  

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