Bravo-ljq 2023-02-15 17:24 采纳率: 0%
浏览 49
已结题

qiankun子应用样式不生效

乾坤中开启时使用了沙箱样式隔离，在主应用中访问子应用时ant-design-vue组件的样式全都不生效了，单独访问子应用时是正常的

img


技术栈使用了vue3+vite+ant-design-vue

  • 写回答

2条回答 默认 最新

  • 快撑死的鱼 2023-02-15 21:26
    关注

    根据你提供的信息，问题可能是由于沙箱隔离导致的。沙箱隔离的作用是将子应用的样式和组件等与主应用隔离开来，这可能会导致样式不生效的问题。下面提供一些解决方案供参考：

    1、使用共享模式
    可以在主应用中开启 qiankun 的共享模式，使得子应用的样式和组件等能够共享主应用的样式和组件等，从而解决样式不生效的问题。

    在主应用中，通过配置 useDynamicImport 和 jsSandbox 两个属性，将 useDynamicImport 设置为 false，jsSandbox 设置为 false，以开启共享模式。例如：

    // main.js
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'child-app',
    entry: '//localhost:8001',
    container: '#container',
    activeRule: '/child-app',
  },
]);

start({
  useDynamicImport: false,
  jsSandbox: false,
});

    在子应用中，则需要在 entry 的 HTML 模板中引入主应用的样式和组件等。例如，可以在 public/index.html 中引入 ant-design-vue 的样式和组件：

    <!-- public/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>child-app</title>
    <link rel="stylesheet" href="//unpkg.com/ant-design-vue/dist/antd.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

    这样，在访问子应用时，ant-design-vue 的样式和组件等就能够正常生效了。

    2、使用样式标记
    另一种解决样式不生效的问题的方法是，在子应用的样式文件中加入特定的标记，来表示这些样式需要被保留。在主应用中的沙箱隔离配置中，通过 strictStyleIsolation 选项，将这些标记的样式保留下来，从而让样式能够正常生效。

    在 ant-design-vue 中，可以在样式文件中使用 :global 标记来标记需要保留的样式，例如：

    /* src/main.css */
:global .ant-button {
  /* ant-design-vue 按钮组件的样式 */
}

    在主应用中，则需要在沙箱隔离配置中，将 strictStyleIsolation 设置为 false，并将 allowedStyleRules 设置为 ['font', 'color', 'width', 'height', 'background-color', /^:global/]，表示保留字体、颜色、宽度、高度、背景颜色和 :global 标记的样式。例如：

    // main.js
import { registerMicroApps,
    评论 编辑记录

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 2月21日
  • 创建了问题 2月15日

悬赏问题

  • ¥15 curl 命令调用正常，程序调用报 java.net.ConnectException: connection refused
  • ¥20 关于web前端如何播放二次加密m3u8视频的问题
  • ¥20 spring boot集成mqtt的使用问题
  • ¥15 使用百度地图api 位置函数报错？
  • ¥15 metamask如何添加TRON自定义网络
  • ¥66 关于川崎机器人调速问题
  • ¥15 winFrom界面无法打开
  • ¥30 crossover21 ARM64版本安装软件问题
  • ¥15 mymetaobjecthandler没有进入
  • ¥15 mmo能不能做客户端怪物