小程序less编译

一、微信小程序只支持原生css写法，但是前端开发less和sass已经很普及。

网上有很多webstrom编译less的方法，个人觉得比较麻烦。

下面介绍一个less编译的方法：

1、npm或者yarn全局安装wxss-cli

npm install -g wxss-cli
2、运行wxss-cli命令(miniProject为小程序目录)，less文件保存时自动编译

wxss ./miniProject

3、小程序不能识别*.less文件，所以可以任意打开一款less编译器，比如webstrom，HBuilder等

4、在page里面每个页面添加一个同名的.less文件，编写less代码，会自动同步到.wxss文件中

二、viscode编辑器设置

1、Easy LESS下载(安装后，最好重启一下编辑器，这样就可以把less编译为css)

2、在viscode 设置问题(左下角点击设置按钮点击设置)

在配置文件中写入

{
    "less.compile": {
        "compress": true, // 是否删除多余空白字符
        "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件
        "out": false, // 是否输出css文件，false为不输出
        "outExt": ".wxss", // 输出文件的后缀,默认为.css
    }
}

3、重启一下编辑器就可以展示Less 但是有个毛病就是这是全局的（单个项目要单独配置有方法，如果不是小程序必须把这行注释掉）

4、当不需要编译Less文件的时候，直接注释这几句话的时候，还会默认编译为css(Easy LESS的作用)，

注意：只需要把less.compile下面的out属性的值改为false就行了