600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 微信小程序: 微信小程序-开发者工具添加less插件

微信小程序: 微信小程序-开发者工具添加less插件

时间:2023-09-14 16:51:33

相关推荐

微信小程序: 微信小程序-开发者工具添加less插件

在入门微信小程序的时候,在其他编译软件中有使用less插件的小伙伴都会发现,在微信小程序- 开发者工具中是没有下载插件这个入口的,所以我们可以借助vscode来辅助微信小程序-开发者工具安装less插件。

一、首先我们需要在vscode中先安装easy-less这个插件,代码老手就不用多说了,懂得都懂。

1、打开vscode后点击左侧栏四个格子那个图标

2、在输入框中输入less后,找到Easy LESS这个插件,点击安装按钮

3、安装成功

二、接下来我们要在vscode文件夹目录下面找到Easy LESS 插件

1、一般的目录都会是这个:C:\Users(用户)\用户名\.vscode\extensions

2、找到mrcrowl.easy-less-1.7.3这个文件夹并把它拷贝一下

三、接下来我们要打开,把刚刚在vscode里拷贝的文件夹拉进来

1、打开微信小程序-开发者工具后,先点击设置,再点击扩展设置

2、进来后先点击编辑器自定义扩展,再点击打开扩展文件夹

3、打开目录后,把刚刚从vscode插件目录下拷贝到的文件夹mrcrowl.easy-less-1.7.3拷贝到这个目录下面 (我们也可以手动打开微信小程序-开发者工具的扩展文件夹,这个目录的路径为:C:\Users\用户名\AppData\Local\微信开发者工具\UserData\094c053293b042fe1312a083baf68c8c\Default\Editor\User\extensions)四、接下来我们进行相应的配置

1、打开微信小程序-开发者工具 =》 设置 =》 编辑器设置 =》更多及工作区的编辑器设置...

2、在搜索框搜json =》 点击扩展列表下的JSON =》点击在settings.json中编辑

3、在setings.json中输入以下代码后保存

"pile":{"outExit": ".wxss"},

4、再次打开设置 =》扩展设置 =》 编辑器自定义扩展 =》打开mrcrowl.easy-less的开关 =》 重启微信小程序-开发者工具

五、这时候我们已经配置成功了,接下来进行测试就OK了

1、新建一个文件夹

2、在文件夹里面新建一个 .less 文件

3、在文件中输入这段代码后保存,文件夹中会自动生成一个 .wxss 文件

.view{width:100px;height:100px;background:lightblue;.text{color:red;}}

4、生成的 .wxss 文件

.view{width:100px;height:100px;background:lightblue;}.view .text{color:red;}

恭喜恭喜!!!这样子就大功告成啦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。