postcss-bem插件在webpack4以上版本報錯處理 .moveTo is not a fu

wwolf 發布于2019-08-29 17:24 / 3275人閱讀

摘要：強大的插件讓我們在編寫的過程中獲得了極大的便利，比如，我們可以方便的使用語法來命名我們的組件。但是在以上的版本中，卻會導致編譯報錯這是由于源字符串解析成的抽象語法樹已經廢棄了該方法參考一場由引發的血案。

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

這種語法的使用只需我們引入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。
歡迎大家交流使用。

云服務器 GPU云服務器 js 報錯異常插件 python報錯處理 is在服務器哪里看 moveTo

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114306.html

postcss-bem插件在webpack4以上版本報錯處理 .moveTo is not a fu

摘要：強大的插件讓我們在編寫的過程中獲得了極大的便利，比如，我們可以方便的使用語法來命名我們的組件。但是在以上的版本中，卻會導致編譯報錯這是由于源字符串解析成的抽象語法樹已經廢棄了該方法參考一場由引發的血案。 postcss強大的插件讓我們在編寫css的過程中獲得了極大的便利，比如，我們可以方便的使用BEM語法來命名我們的組件。我是Title 我是內容 @compon...

PiscesYE 2019-08-23 13:48 評論0 收藏0
webpack3 升級 webpack4踩坑記錄

摘要：本篇不包含所有坑，暫時只記錄自己踩到的部分坑一安裝安裝最新版本安裝新增依賴這個在中，本身和它的是在同一個包中，中將兩個分開管理。我記錄下自己更新這個的過程，以下前半部分可以直接跳過。以下記錄踩坑過程。本篇不包含所有坑，暫時只記錄自己踩到的部分坑一.安裝安裝webpack4最新版本 npm install --save-dev webpack@4 安裝新增依賴 webpack-c...

馬忠志 2019-08-02 15:38 評論0 收藏0
JavaScript 之核心語法 [ 函數和作用域 ]

摘要：函數描述表示定義一段代碼，并且可重復使用函數的定義函數聲明方式字面量表達方式函數聲明方式語法函數名稱小括號不可省去函數體函數聲明方式在定義函數時，函數體中的內容不會被執行啞吼吼調用函數使用函數名稱調用函數的時候會執行函數體中的內容字面量方函數描述表示定義一段JavaScript代碼，并且可重復使用函數的定義函數聲明方式字面量表達方式函數聲明方式語法 function...

joy968 2019-08-23 10:59 評論0 收藏0