小程序项目支持saas/less

前言

微信小程序已支持编译插件配置，支持编译插件有 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  -t  -opt 

# 参数解释
# 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);
  }
}