postcss强大的插件让我们在编写css的过程中获得了极大的便利，比如，我们可以方便的使用BEM语法来命名我们的组件。

    
    
     
我是Title
    
     
      我是内容
     
    

@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;}

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

xx .moveTo is not a function

这是由于css源字符串解析成的抽象语法树已经废弃了该方法（参考）。所以不再能够使用moveto去操作抽象树中的节点。所以使用append方法来代替即可解决该问题。

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

为此，撸了一个npm包，可供后续开发人员调用。包地址：