postcss-bem外掛在webpack4以上版本報錯處理 .moveTo is not a function

我只是個小開發發表於2018-11-29

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
歡迎大家交流使用。

相關文章