Vue修改node_modules插件下dist中的样式

一、修改样式的思路（js的想法）

• 今天突然遇到一个要改bpmn源码中样式的需求，但是又不能直接去改源码打成dist包中的样式，node_module下改了也没啥用。
• 于是想起了用js操作节点来修改样式。

1.1、首先是getElementsByClassName()

代码这样

document.getElementsByClassName('group-closed').length

1.先获取折叠了的group，
2.通过获取它的长度才能获得它折叠后的第一个样式再进行修改。

3...结果发现没办法监听到这个还没有折叠的节点

1.2、然后想起了MutationObserver.observe()

• MutationObserver.observe()就是观察者

能够监听元素（可惜，我这里是要监听节点）的变化，然后进行callback回调函数。

// 得到要观察的元素
var elementToObserve = document.querySelector("#targetElementId");

// 创建一个叫 `observer` 的新 `MutationObserver` 实例，
// 并将回调函数传给它
var observer = new MutationObserver(function() {
    console.log('callback that runs when observer is triggered');
});

// 在 MutationObserver 实例上调用 `observe` 方法，
// 并将要观察的元素与选项传给此方法
observer.observe(elementToObserve, {subtree: true, childList: true});

1.3、再然后试了下事件监听器

悲剧的ε(┬┬﹏┬┬)3发现它也是监听元素的

document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}

二、最终还是考虑回了css直接修改

1. 首先不能直接修改node_modules中插件的dist
2. 于是想起了scss，毕竟css打包之前就是这玩意嘛。
3. 然后进行尝试

第一次修改，发现它是scoped，只能作用域本组件中

<style lang="scss" scoped>

</style >

于是在上面加了一个

<style >
.bpp-properties-group.group-closed {
    max-height: 30px ;
    border-top: none;
    cursor: pointer;
    background-color: rgba(143, 192, 113, 0.2);
    padding-top: 0;
    padding-bottom: 0;
}
</style >

没起作用，虽然是这个节点。最后想有没有能解决这个冲突掉的节点样式

<style >
.bpp-properties-group.group-closed {
    max-height: 30px  !important;//╰(*°▽°*)╯
    border-top: none;
    cursor: pointer;
    background-color: rgba(143, 192, 113, 0.2);
    padding-top: 0;
    padding-bottom: 0;
}
</style >

╰(°▽°)╯！惊喜的发现有一个强制样式可以用，嘿嘿，于是在不能改源码的时候可以用!important直接给他giao掉