解决前端微应用qiankun样式污染问题解决（网上一大堆方法都解决不了）

由于项目使用了同一个组件库，导致样式污染很严重，根据官方提供的方法修改前缀，官方是提供了ant-design为例子，但是咋们的组件库没有统一修改组件库打包后class_pre怎么办呢，我也是网上各种坑都睬了，后来实在找不到，只能手写插件来做一个适配，或不多说看代码

1. 创建一个postcss-add-css-prefix.js,内容如下

   const postcss = require("postcss");
   module.exports = postcss.plugin("postcss-add-css-prefix", function (opts = {}) {
     const { prefix = "" } = opts;
   
     // 接收两个参数，第一个是每个css文件的ast，第二个参数中可获取转换结果相关信息(包括当前css文件相关信息)
     function plugin(css, result) {
       if (!prefix) return; // 没传入prefix，不执行下面的逻辑
       css.walkRules((rule) => {
         //console.log("rule ----->", rule);
         // 遍历当前ast所有rule节点
         const { selector } = rule;
         // 加了个flag，防止节点更新后重复执行该逻辑进入死循环
         if (
           selector.includes("ivu") &&
           !selector.includes(prefix) &&
           !rule.flag
         ) {
           rule.flag = true;
           const clone = rule.clone();
           // console.log(selector);
           clone.selector = selector.replace(/ivu/g, `${prefix}`);
           rule.replaceWith(clone);
         }
       });
     }
   
     return plugin;
   });
   

2. 在postcss.config.js引入插件

   //这里引入
   const cssPrefix = require("./postcss-add-css-prefix.js")({
     prefix: "main-ui",  //自定义前缀名称
   });
   
   module.exports = (ctx) => {
     return {
       plugins: [cssPrefix, require("autoprefixer")],
     };
   };
   

3.  以下内容为作者自己做记录，可以忽略，需要看插件如何工作原理的可以上console.log("rule ----->", rule);​​​​​​​打印出来的内容

   rule -----> <ref *1> Rule {
     raws: { before: '\n ', between: ' ', semicolon: true, after: '\n' },
     type: 'rule',
     nodes: [
       Declaration {
         raws: [Object],
         type: 'decl',
         parent: [Circular *1],
         source: [Object],
         prop: 'background',
         value: '#fff'
       }
     ],
     parent: Root {
       raws: { semicolon: false, after: '\n' },
       type: 'root',
       nodes: [
         [Rule],        [Rule],
         [Rule],        [Rule],
         [Rule],        [Rule],
         [Rule],        [Rule],
         [Rule],        [Rule],
         [Circular *1], [Rule]
       ],
       source: { input: [Input], start: [Object] },
       lastEach: 1,
       indexes: { '1': 10 }
     },
     source: {
       start: { line: 53, column: 2 },
       input: Input {
         css: '.nr-model {\n' +
           '  width: 100%;\n' +
           '  height: 100%;\n' +
           '}\n' +
           '.nr-model .nav {\n' +
           '  background: #f7f8fa;\n' +
           '  height: 48px;\n' +
           '  display: flex;\n' +
           '  justify-content: flex-end;\n' +
           '  align-items: center;\n' +
           '  padding: 0 16px 0 16px;\n' +
           '  border-radius: 3px 3px 0px 0px;\n' +
           '  border-top: 1px solid #cfd7e5;\n' +
           '  border-bottom: 1px solid #cfd7e5;\n' +
           '}\n' +
           '.nr-model .nav .iconfont {\n' +
           '  margin-right: 24px;\n' +
           '  font-size: 16px;\n' +
           '  cursor: pointer;\n' +
           '}\n' +
           '.nr-model main {\n' +
           '  height: calc(100% - 48px);\n' +
           '}\n' +
           '.nr-model main #graph {\n' +
           '  width: 100%;\n' +
           '  height: 100%;\n' +
           '}\n' +
           '.nr-model main #stencil {\n' +
           '  width: 100%;\n' +
           '  height: 100%;\n' +
           '  position: relative;\n' +
           '}\n' +
           '.nr-model main .title {\n' +
           '  width: 100%;\n' +
           '  height: 40px;\n' +
           '  display: flex;\n' +
           '  padding-left: 15px;\n' +
           '  align-items: center;\n' +
           '  border-bottom: 1px solid #e8eaec;\n' +
           '}\n' +
           '.nr-model main .groups {\n' +
           '  display: flex;\n' +
           '  flex-direction: column;\n' +
           '}\n' +
           '.nr-model main .groups li {\n' +
           '  border-bottom: 1px solid #e8eaec;\n' +
           '  padding: 15px;\n' +
           '  cursor: pointer;\n' +
           '}\n' +
           ' /deep/ .x6-widget-stencil-group > .x6-widget-stencil-group-title {\n' +
           '  display: none;\n' +
           '}\n' +
           ' /deep/ .x6-widget-stencil-group {\n' +
           '  background: #fff;\n' +
           '}\n' +
           ' /deep/ .x6-widget-stencil-content {\n' +
           '  background: #fff;\n' +
           '}\n',
         hasBOM: false,
         file: 'D:\\My WorkPlace\\远舢\\低代码平台\\apaas-ui\\src\\views\\NRModel.vue'
       },
       end: { line: 55, column: 1 }
     },
     selector: '/deep/ .x6-widget-stencil-group'
   }