diff --git a/docs/faq/README.md b/docs/faq/README.md index 0903f6f..9860f5f 100644 --- a/docs/faq/README.md +++ b/docs/faq/README.md @@ -165,6 +165,7 @@ There are mainly the following solutions: .end() }, } + ``` 3. Use the `file-loader` of `webpack` to inject the full path when packaging it (suitable for projects with large font files and images) @@ -337,6 +338,36 @@ See [Enable Nginx Cors](https://enable-cors.org/server_nginx.html). Qiankun will isolate stylesheet between your sub apps automatically, you can manually ensure isolation between master and child applications. Such as add a prefix to all classes in the master application, and if you are using [ant-design](https://ant.design), you can follow [this doc](https://ant.design/docs/react/customize-theme) to make it works. +Example for antd: + +1. use webpack to modify antd less variable + + ```diff + { + loader: 'less-loader', + + options: { + + modifyVars: { + + '@ant-prefix': 'yourPrefix', + + }, + + javascriptEnabled: true, + + }, + } + ``` + +2. set antd [ConfigProvider](https://ant.design/components/config-provider-cn/) + + ```jsx + import { ConfigProvider } from 'antd'; + + export const MyApp = () => ( + + + + ); + ``` + +Detailed documentation pls check [antd official guide](https://ant.design/docs/react/customize-theme). + ## How to make sub app to run independently? Use the builtin global variable to identify the environment which provided by qiankun master: @@ -505,7 +536,7 @@ router.beforeEach((to, from, next) => { -Both the main application and the micro application are in the `hash` mode. The main application judges the micro application based on the `hash`, so this issue is not considered. -The main application judges the micro application based on the `path` - + It is not possible to directly use the routing instance of the micro-application to jump between micro-applications in the `history` mode or to jump to the main application page. The reason is that the routing instance jumps of the micro-application are all based on the `base` of the route. There are two ways to jump: 1. `history.pushState()`: [mdn usage introduction](https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState) diff --git a/docs/faq/README.zh.md b/docs/faq/README.zh.md index c21ef9d..64e6785 100644 --- a/docs/faq/README.zh.md +++ b/docs/faq/README.zh.md @@ -405,6 +405,35 @@ start({ qiankun 将会自动隔离微应用之间的样式(开启沙箱的情况下),你可以通过手动的方式确保主应用与微应用之间的样式隔离。比如给主应用的所有样式添加一个前缀,或者假如你使用了 [ant-design](https://ant.design) 这样的组件库,你可以通过[这篇文档](https://ant.design/docs/react/customize-theme)中的配置方式给主应用样式自动添加指定的前缀。 +以 antd 为例: +1. 配置 webpack 修改 less 变量 + + ```diff + { + loader: 'less-loader', + + options: { + + modifyVars: { + + '@ant-prefix': 'yourPrefix', + + }, + + javascriptEnabled: true, + + }, + } + ``` + +2. 配置 antd [ConfigProvider](https://ant.design/components/config-provider-cn/) + + ```jsx + import { ConfigProvider } from 'antd'; + + export const MyApp = () => ( + + + + ); + ``` + +详细文档参考 [antd 官方指南](https://ant.design/docs/react/customize-theme)。 + ## 如何独立运行微应用? 有些时候我们希望直接启动微应用从而更方便的开发调试,你可以使用这个全局变量来区分当前是否运行在 qiankun 的主应用的上下文中: