主子应用出现同一个UI框架但是版本不一致导致的主子应用UI框架样式出现问题，先说一下antd这个UI框架。
antd高版本自定义前缀名
可以通过ConfigProvider在顶层修改prefixCls：
<ConfigProvider prefixCls='main-fe'>
<Layout>
<LeftMenu />
<Layout>
<Header>Header</Header>
<Content>
<Outlet />
<div id='firstApp'></div>
</Content>
<Footer>Footer</Footer>
</Layout>
</Layout>
</ConfigProvider>
这里设置完成后，因为前缀名修改了，要进行less的重新编译。
// 如果没有安装less会跑不起来，npm i less -g 这样就可以在终端上跑下边的命令行
lessc --js --modify-var="ant-prefix=main-fe" node_modules/antd/dist/antd.variable.less modified.css
// 编译完成后配置一下webpack文件
{
test: /\.less$/,
use: ["style-loader", "css-loader", {
loader: "less-loader",
options: {
lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
javascriptEnabled: true,
modifyVars: {
// babel配置文件配置
/**
"plugins":[
[
"import",{
"libraryName":"antd",
"libraryDirectory": "es",// antd用es的模块化规范
"style": true, // true默认是less 如果不是less下方配置则不生效，因为需要接受的是less变量
}]
]
*/
"@primary-color": "green", // 主题色 默认是蓝色
"@ant-prefix": "main-fe", //只是改变打包css文件里面代码的前缀
},
},
},
}]
},
这样配置完成后，重启项目就可以了。
elementUI框架样式隔离
element ui和更高版本的element plus都没有提供可以修改prefixCls的方法，所以这个需要我们自己写一个loader去手动修改他的前缀名，就是用一个loader将el开头的类名修改为我们需要的类名。 这里参考了两个发布到npm上的包
postcss-change-css-prefix - npm (npmjs.com)
change-prefix-loader - npm (npmjs.com)
自定义一个loader，抛出一个方法，loader编译的时候会调用抛出的这个方法，将编译好的文件传入你的这个方法中。需要用到loader的几个插件，详细api可以去官网查看loader API | webpack 中文网 (webpackjs.com) 在这里我们用到的插件有loader-utils,获取传入的option配置项，@babel/parser语法转换，转换为ast树，@babel/generator，将ast树转化为code代码， @babel/traverse通过这个方法我们可以拿到ast树中的node types。这样我们可以初始化的时候将需要替换的正则在传入的option中拿到，初识化完成后调用parser方法进行ast树转化，然后调用traverse这个方法在传入的配置项中定义的函数中拿到对应的node types 然后遍历这个node types找到和自己正则匹配的类型进行替换，最后使用generator这个方法将ast再转化为code代码返回出去。
webpack断点调式
webpack官网提供的方法：Debugging | webpack 中文文档 (docschina.org)， 也可以在vscode编译器上进行断点调试ctrl+shift+D启动调试，
然后选择node环境
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"skipFiles": [
"<node_internals>/**"
],
"port": "5050", // 启动服务的端口号
"runtimeExecutable": "npm",
"runtimeArgs": ["run", "startDebugger"] // package.json配置script运行命令
}
]
}
// 需要提供打包环境，webpack的路径，如果自定义了webpack配置文件，需要将配置文件地址告诉webpack
"startDebugger": "cross-env NODE_ENV=development node --inspect-brk=5050 node_modules/webpack/bin/webpack.js --config build/webpack.config.dev.js",
这样webpack调试就可以了，可以选择在引入的loader或者plugin中打断点。
