postcss-bem插件在webpack4以上版本报错处置惩罚 .moveTo is not a function

2023年4月3日 274次阅读 来源: 吴霸霸

postcss壮大的插件让我们在编写css的过程当中获得了极大的轻易，比方，我们可以轻易的运用BEM语法来定名我们的组件。

<div class="CompName">
    <h3 class="CompName-contain is-active">我是Title</h3>
    <div class="CompName-contain">我是内容</div>
</div>
 @component CompName {
    height: 200px;
    width: 200px;
    margin: auto;

    @descendent contain {
        font-size: 16px;
        font-weight: normal;
        color: #333;

        @when active {
            color: #ff5d23;
        }
    }
}
/* 编译后 */
.CompName {
    height: 200px;
    width: 200px;
    margin: auto;
}

.CompName-contain {
    font-size: 16px;
    font-weight: normal;
    color: #333;
}

.CompName-contain.is-active {
    color: #ff5d23;
}

这类语法的运用只需我们引入postcss-bem这个插件就可以的。但是在webpack4以上的版本中，却会致使编译报错：rule.moveTo is not a function

 xx .moveTo is not a function

这是因为css源字符串剖析成的笼统语法树已烧毁了该要领（参考一场由postcss-bem激发的血案）。所以不再可以运用moveto去操纵笼统树中的节点。所以运用append要领来替代即可处理该题目。

newComponent.append(rule);
// rule.moveTo(newComponent);

为此，撸了一个npm包，可供后续开发人员挪用。包地点：wlq-postcss-bem
因为第一次宣布npm包，没有经验，很不范例，迎接人人斧正。github地点：wlq-postcss-bem。
迎接人人交换运用。

    原文作者：吴霸霸
    原文地址: https://segmentfault.com/a/1190000017194293
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞