前言
微信小程序已支持編譯插件配置伤为，支持編譯插件有 typescript、less漠秋、sass 文檔
在project.config.json增加如下配置：
{
"setting": {
"useCompilerPlugins": [
"less"
]
}
}
Tips: 編譯優(yōu)先級 wxss>saas 或 wxss>less
工具
批量將css轉(zhuǎn)換為saas
使用
npm i css-pipe-all
# 或
yarn add css-pipe-all
# 執(zhí)行
cssPipe run <dirname> -t <suffix> -opt <options>
# 參數(shù)解釋
# dirname：文件夾
# suffix：文件后綴
# options：見下文（可選參數(shù)opt）
目前實(shí)現(xiàn)功能
- 支持去除注釋（選擇器內(nèi)/外）
- 支持指定縮進(jìn)2肉盹、4個(gè)空格
- 支持批量刪除無用文件
可選參數(shù)t
| 參數(shù) | 含義 |
|---|---|
| wxss | 文件后綴 |
| css | 文件后綴 |
| acss | 文件后綴 |
| ttss | 文件后綴 |
ps: 理論上只要文件內(nèi)容為標(biāo)準(zhǔn)css語法俺陋，任何文件后綴都可轉(zhuǎn)換
可選參數(shù)opt
| 參數(shù) | 含義 |
|---|---|
| delOut | 去除選擇器外層注釋 |
| delIn | 去除選擇器內(nèi)層注釋 |
| tab2 | 縮進(jìn)2個(gè)空格 |
| tab4 | 縮進(jìn)4個(gè)空格 |
| delFile | 刪除指定后綴類型文件 |
案例
- 現(xiàn)有index.wxss文件內(nèi)容如下
/* Outside Comment 選擇器外層注釋 */
header {
padding:20px;
}
header h1 { /* Nesting 選擇器內(nèi)層注釋 */
box-shadow: 0 0 0 rgba(0,0,0,0.9);
}
- 基礎(chǔ)語法轉(zhuǎn)換
# 執(zhí)行命令
cssPipe run index -t wxss
# 轉(zhuǎn)換結(jié)果
/*! Outside Comment 選擇器外層注釋 */
header {
padding: 20px;
h1 {
/*! Nesting 選擇器內(nèi)層注釋 */
box-shadow: 0 0 0 rgba(0,0,0,.9);
}
}
- 縮進(jìn)為4個(gè)空格
# 命令
cssPipe run index -t wxss -opt tab4
# 轉(zhuǎn)換結(jié)果
/*! Outside Comment 選擇器外層注釋 */
header {
padding: 20px;
h1 {
/*! Nesting 選擇器內(nèi)層注釋 */
box-shadow: 0 0 0 rgba(0,0,0,.9);
}
}
- 刪除選擇器外層注釋
# 命令
cssPipe run index -t wxss -opt delOut
# 轉(zhuǎn)換結(jié)果
header {
padding: 20px;
h1 {
/*! Nesting 選擇器內(nèi)層注釋 */
box-shadow: 0 0 0 rgba(0,0,0,.9);
}
}
