資訊專(zhuān)欄INFORMATION COLUMN
摘要：強(qiáng)大的插件讓我們?cè)诰帉?xiě)的過(guò)程中獲得了極大的便利，比如，我們可以方便的使用語(yǔ)法來(lái)命名我們的組件。但是在以上的版本中，卻會(huì)導(dǎo)致編譯報(bào)錯(cuò)這是由于源字符串解析成的抽象語(yǔ)法樹(shù)已經(jīng)廢棄了該方法參考一場(chǎng)由引發(fā)的血案。
postcss強(qiáng)大的插件讓我們?cè)诰帉?xiě)css的過(guò)程中獲得了極大的便利，比如，我們可以方便的使用BEM語(yǔ)法來(lái)命名我們的組件。
我是Title
我是內(nèi)容
@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;
}
這種語(yǔ)法的使用只需我們引入postcss-bem這個(gè)插件就可以的。但是在webpack4以上的版本中，卻會(huì)導(dǎo)致編譯報(bào)錯(cuò)：rule.moveTo is not a function
xx .moveTo is not a function
這是由于css源字符串解析成的抽象語(yǔ)法樹(shù)已經(jīng)廢棄了該方法（參考一場(chǎng)由postcss-bem引發(fā)的血案）。所以不再能夠使用moveto去操作抽象樹(shù)中的節(jié)點(diǎn)。所以使用append方法來(lái)代替即可解決該問(wèn)題。
newComponent.append(rule); // rule.moveTo(newComponent);
為此，擼了一個(gè)npm包，可供后續(xù)開(kāi)發(fā)人員調(diào)用。包地址：wlq-postcss-bem
由于第一次發(fā)布npm包，沒(méi)有經(jīng)驗(yàn)，很不規(guī)范，歡迎大家指正。github地址：wlq-postcss-bem。
歡迎大家交流使用。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114306.html
摘要：強(qiáng)大的插件讓我們?cè)诰帉?xiě)的過(guò)程中獲得了極大的便利，比如，我們可以方便的使用語(yǔ)法來(lái)命名我們的組件。但是在以上的版本中，卻會(huì)導(dǎo)致編譯報(bào)錯(cuò)這是由于源字符串解析成的抽象語(yǔ)法樹(shù)已經(jīng)廢棄了該方法參考一場(chǎng)由引發(fā)的血案。 postcss強(qiáng)大的插件讓我們?cè)诰帉?xiě)css的過(guò)程中獲得了極大的便利，比如，我們可以方便的使用BEM語(yǔ)法來(lái)命名我們的組件。 我是Title 我是內(nèi)容 @compon...
摘要：本篇不包含所有坑，暫時(shí)只記錄自己踩到的部分坑一安裝安裝最新版本安裝新增依賴這個(gè)在中，本身和它的是在同一個(gè)包中，中將兩個(gè)分開(kāi)管理。我記錄下自己更新這個(gè)的過(guò)程，以下前半部分可以直接跳過(guò)。以下記錄踩坑過(guò)程。 本篇不包含所有坑，暫時(shí)只記錄自己踩到的部分坑 一.安裝 安裝webpack4最新版本 npm install --save-dev webpack@4 安裝新增依賴 webpack-c...
摘要：函數(shù)描述表示定義一段代碼，并且可重復(fù)使用函數(shù)的定義函數(shù)聲明方式字面量表達(dá)方式函數(shù)聲明方式語(yǔ)法函數(shù)名稱(chēng)小括號(hào)不可省去函數(shù)體函數(shù)聲明方式在定義函數(shù)時(shí)，函數(shù)體中的內(nèi)容不會(huì)被執(zhí)行啞吼吼調(diào)用函數(shù)使用函數(shù)名稱(chēng)調(diào)用函數(shù)的時(shí)候會(huì)執(zhí)行函數(shù)體中的內(nèi)容字面量方 函數(shù) 描述 表示定義一段JavaScript代碼，并且可重復(fù)使用 函數(shù)的定義 函數(shù)聲明方式 字面量表達(dá)方式 函數(shù)聲明方式 語(yǔ)法 function...
閱讀 2323·2021-11-24 10:33
閱讀 1389·2019-08-30 15:43
閱讀 3283·2019-08-29 17:24
閱讀 3489·2019-08-29 14:21
閱讀 2229·2019-08-29 13:59
閱讀 1742·2019-08-29 11:12
閱讀 2816·2019-08-28 18:00
閱讀 1857·2019-08-26 12:17
