用惯了less/scss
,再在微信小程序里用css
感觉好不方便啊。
在网上找的小程序使用less教程很多链接都没更新。微信开发者工具从开始支持扩展中间升级了很多版本,步骤、设置多少都有变化,故在此做一次最新总结。
一、首先打开微信开发者工具,找到扩展设置按钮
二、点击"..."更多按钮,点击“从已解包的扩展文件夹中安装”
三、找到vscode的文件夹,找到easy-less的扩展文件夹(当前,前提是已经在vscode中安装了easy-less扩展)
四、导入之后在easy-less上面右键点击,选择“Extension Setting”,在搜索框中输入“easy-less”,
五、在easy-less的setting文件中设置编译后输出文件为wxss
"less.compile": {
"outExt":".wxss"
}
六、大功告成! 在此期间需要保证使用npm安装了less编译器:less以及less-loader
总结:本文使用的示例是less,scss的使用要求和步骤都是一样的。 想提高开发效率,快来试试吧!