前言
微信小程序已支持编译插件配置，支持编译插件有 typescript、less、sass 文档
在project.config.json增加如下配置：
{
"setting": {
"useCompilerPlugins": [
"less"
]
}
}
Tips: 编译优先级 wxss>saas 或 wxss>less
工具
批量将css转换为saas
使用
npm i css-pipe-all
# 或
yarn add css-pipe-all
# 执行
cssPipe run <dirname> -t <suffix> -opt <options>
# 参数解释
# dirname：文件夹
# suffix：文件后缀
# options：见下文（可选参数opt）
目前实现功能
- 支持去除注释（选择器内/外）
- 支持指定缩进2、4个空格
- 支持批量删除无用文件
可选参数t
| 参数 | 含义 |
|---|---|
| wxss | 文件后缀 |
| css | 文件后缀 |
| acss | 文件后缀 |
| ttss | 文件后缀 |
ps: 理论上只要文件内容为标准css语法，任何文件后缀都可转换
可选参数opt
| 参数 | 含义 |
|---|---|
| delOut | 去除选择器外层注释 |
| delIn | 去除选择器内层注释 |
| tab2 | 缩进2个空格 |
| tab4 | 缩进4个空格 |
| delFile | 删除指定后缀类型文件 |
案例
- 现有index.wxss文件内容如下
/* Outside Comment 选择器外层注释 */
header {
padding:20px;
}
header h1 { /* Nesting 选择器内层注释 */
box-shadow: 0 0 0 rgba(0,0,0,0.9);
}
- 基础语法转换
# 执行命令
cssPipe run index -t wxss
# 转换结果
/*! Outside Comment 选择器外层注释 */
header {
padding: 20px;
h1 {
/*! Nesting 选择器内层注释 */
box-shadow: 0 0 0 rgba(0,0,0,.9);
}
}
- 缩进为4个空格
# 命令
cssPipe run index -t wxss -opt tab4
# 转换结果
/*! Outside Comment 选择器外层注释 */
header {
padding: 20px;
h1 {
/*! Nesting 选择器内层注释 */
box-shadow: 0 0 0 rgba(0,0,0,.9);
}
}
- 删除选择器外层注释
# 命令
cssPipe run index -t wxss -opt delOut
# 转换结果
header {
padding: 20px;
h1 {
/*! Nesting 选择器内层注释 */
box-shadow: 0 0 0 rgba(0,0,0,.9);
}
}
