@componentCompName{height:200px;宽度：200px；保证金：自动；@descendentcontain{字体大小：16px；字体粗细：正常；颜色：#333；@whenactive{颜色：#ff5d23;}}}/*编译后*/.CompName{height:200px;宽度：200px；边距：自动；}.CompName-contain{字体大小：16px；字体粗细：正常；color:#333;}.CompName-contain.is-active{color:#ff5d23;}这种语法的使用只需要我们引入postcss-bem插件即可。但是在webpack4以上的版本中，会出现编译错误：rule.moveToisnotafunctionxx.moveToisnotafunction。这是因为从css源码字符串解析出来的抽象语法树已经放弃了这种方法（参考postcss-bem引起的血洗）。所以不能再使用moveto来操作抽象树中的节点。所以改用append方法来解决这个问题。newComponent.append(rule);//rule.moveTo(newComponent);为此，创建了一个npm包，供后续开发者调用。包地址：wlq-postcss-bem由于是第一次发布npm包，所以没有经验，很不规范。欢迎指正。GitHub地址：wlq-postcss-bem。欢迎交流使用。