一、微信小程序只支持原生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就行了