微信小程序: 微信小程序-开发者工具添加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中输入以下代码后保存
"less.compile":{"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;
}
恭喜恭喜!!!这样子就大功告成啦!
微信小程序: 微信小程序-开发者工具添加less插件相关推荐
- 微信小程序——微信开发者工具添加less插件
1.下载插件 访问vscode-easy-less 目前更新到1.7.3,点击easy-less-1.7.3.vsix进行下载 2.安装插件 (1)打开微信开发者工具,按下图操作 (2)选择刚刚下载好 ...
- 注册微信小程序下载并使用开发者工具
微信小程序 开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序. 申请帐号 进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号. 在这个小程序 ...
- 2022版本微信开发者工具引入less插件
一.将less插件放入微信开发者工具的扩展目录中去 1.less插件获取方式在CSDN上可以搜索到,很多友友分享: 2.查看拓展路径方式:编辑=>打开编译器扩展目录 我本人的扩展文件夹路径可供参 ...
- 微信开发者工具扩展自定义插件
需求:在微信开发者工具内扩展一个 编译less语法的插件 实现基础:微信开发者工具应该用的是vscode的开源内核. 查看微信官网: 想要安装一个vscode的插件: 1.找到插件 首先按照微信官网给 ...
- android 微信辅助开发,Android 微信支持直接从 chrome 的开发者工具调试啦!
前言 之前在广州的 Appium girl QQ 群有同学分享了微信的开发者工具,今天终于抽空试了下,惊喜地发现现在 Android 版微信已经可以通过一些设置做到支持从 chrome 的开发者工具直 ...
- 微信分享自定义标题和图片,开发者工具没问题,真机调试失败
昨天亲身经历,微信分享开发者工具调试没问题,但是真机调试失败,说明配置是没问题的,历经一天发现是缓存的问题 解决方案: 删除掉微信进程后,缓存没有被彻底清除 安卓手机打开 debugtbs.qq.co ...
- 使用微信开发者工具添加小程序底部导航栏报错
粉丝求助: 示例图: 看了这个页面,很明显这个页面引用的路径都有问题. 解决办法:
- 微信小程序零基础入门_第一章 小程序和开发者工具的介绍
第一章 小程序和开发者工具的基本介绍 1.1 小程序的开发工具 微信小程序的开发者需要先通过微信公众平台注册开发者账号.在微信公众平台网页中的账号分类->小程序中有着较为详细的注册介绍,可以较为 ...
- 【小程序学习】uni-app无法启动微信开发者工具
首次配置时: 1.manifest.json--"微信小程序配置" --微信小程序AppID 要与开发者工具中的AppID对应,开发者工具中的AppID在详情中查看,想要更改的话可 ...
最新文章
- Android MVC,MVP,MVVM模式入门——重构登陆注册功能
- MySQL TEXT数据类型的最大长度
- c 文件怎么进行读取和写入操作?
- NOI数学:大步小步(Baby Step Giant Step,BSGS)算法
- 三大运营商5G基站大单纷纷落地:华为、中兴、爱立信、大唐移动收获大
- r语言 不同长度 list 转 dataframe_解决R效率问题—parallel多线程启动
- iOS之友盟简单分享(第三方)及sso授权问题
- oracle 由非归档到归档模式
- web测试之性能测试
- C# 创建PPT图表
- GHD官宣全新中国区焕发大使乔欣
- xmind文件不见了处理方法
- JVM中栈的frames详解
- (转)Android单元测试
- Smss.exe 进程分析--NT 源码--当机方法
- Spring-Boot配置
- 基于FPGA的DDS 信号发生器(三)
- 搜一下导航完整程序源码
- 2013年CISA考试知识点变化总结讲义
- 靶场笔记-covfefe