微信小程序:微信开发者工具安装less插件

这篇具有很好参考价值的文章主要介绍了微信小程序:微信开发者工具安装less插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序:本文主要是关于如何在微信开发者工具中安装less插件


前言

不知道大家有没有像我一样习惯在vscode里面用惯了less,当需要用微信开发者工具开发小程序时,如果没有这个会有些不习惯,下面就简单介绍一下,如何在微信开发者工具中安装less插件。


一、less是什么?

less:是一个CSS预处理器,CSS预处理器是一种脚本语言,可扩展CSS并将其编译为常规CSS语法,以便可以通过Web浏览器读取。

二、安装步骤

1.首先在vscode中先安装easy-less这个插件

在微信开发者工具中是没有下载这个插件入口的,所以我们需要借助vscode来辅助微信开发者工具安装less插件
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序

2.接下来在vscode文件夹目录下面找到Easy LESS 插件

1、一般的目录都会是这个:C:\Users(用户)\Administrator(用户名)\ .vscode\extensions
2、找到mrcrowl.easy-less-2.0.0这个文件夹(可能你们的版本和我不一样,这里没啥影响)
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序


3.打开微信开发者工具,进行如下配置

1、打开如下图1 设置–>扩展设置
2、找到如下图2 编辑器扩展–>打开编辑器扩展面板
3、点击如下图3 …–>从已解包的扩展文件夹安装
4、接下来,找到步骤2中的mrcrowl.easy-less-2.0.0这个文件夹,如下图3;
5、安装成功后进行配置,打开 设置–>Extension Settings,如下图5、图6、图7;
6、添加如下图8 代码,可以将less自动转换为微信小程序识别的wxss文件。
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序

4.使用插件

1、在page文件下新建 .less文件,输入css代码后保存,page文件下会自动生成对应的wxss文件
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序
微信开发者工具安装插件,微信小程序,微信小程序,less,小程序

文章参考:https://blog.csdn.net/qq_40348833/article/details/124300655

总结

如果想安装sass,步骤也是相似的啦~

以上就是今天分享的内容啦~,希望大家多多点赞支持👍👍❤️❤️😊😊文章来源地址https://www.toymoban.com/news/detail-625908.html

到了这里,关于微信小程序:微信开发者工具安装less插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发者工具下载

    微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com) 下载安装好后,软件图标如下图所示。 运行软件如下图所示,这时候就需要使用你的管理员账号扫码登录。 登陆后的界面,如下图所示。可以项目分为两类: 小程序项目、公众号网页项目 。其中,小程序项目又细

    2024年04月23日
    浏览(125)
  • [微信小程序开发者工具] × #initialize

    [微信小程序开发者工具] × #initialize-error: [error] 工具的服务端口已关闭。要使用命令行调用工具,请在下方输入 y 以确认开启,或手动打开工具 - 设置 - 安全设置,将服务端口开启。 从HBuilder运行到微信小程序的时候报错 解决办法: 打开微信开发者工具,选择设置–通用设

    2024年02月11日
    浏览(79)
  • 快速上手微信小程序(纯原生)基于微信开发者工具+云开发

    最近开发一个小程序。因为体量实在不大,两张表,几个接口。便打算写原生的代码。没有使用uniapp等框架。记录一下一个小程序从搭建到审核发布的那些坑和经验做为学习笔记。 几个网站请收藏 你的小程序需要开发工具: 保姆级传送门 你的小程序需要一个身份证: 微信公

    2024年02月10日
    浏览(85)
  • 微信小程序实现简单的点击切换功能(微信开发者工具)

    📚文章目录 🔗首先创建一个简单的切换按钮📋 如图下  📋wxml代码  📋wxss代码 🔗但是这个元素是无法点击的,所以要添加一个点击事件到这两个元素里面  📋js代码(在page({})里面添加) 📋wxml代码  🔗class使用三元表达式来继续点击判断  🔗使用bindtap绑定事件  事件的

    2024年02月09日
    浏览(210)
  • 【HbuilderX+微信小程序开发者工具解决报错问题】

    一定要正确的配置运行终端 包括 浏览器 、 小程序 安装路径等,还包括小程序的appid,并且要和申请的帐号匹配的登录才能正常的运行 进入微信公众平台https://mp.weixin.qq.com/登录 扫码确认 点击 首页-》配置服务-》开发设置 ,查询appId 如下图 问题描述 [微信小程序开发者工具

    2024年02月09日
    浏览(71)
  • 微信小程序 ---在Vscode上编辑,微信开发者工具上预览,快速上手

    成功 导入一个已经在开发中项目 设置高亮 拷贝到 settings.json 重启 vscode 打开 wxml 文件 观察 有没有高亮 安装小程序开发插件 全局配置 app.json pages 字段 只能在微信开发者工具中 编辑 pages字段,按下保存 才生效!!! pages 快速创建页面的时候 在里面创建即可 作用 : 快速创

    2024年02月01日
    浏览(83)
  • HBuilder X运行微信小程序项目至微信开发者工具失败

    在HBuilder X中运行微信小程序项目时,此步于以下过程,无法进一步打开界面   解决方案: 导入项目即可,但是需要注意导入项目的路径信息。 需要是当前项目unpackage==dist==dev==mp-weixin下面的文件,微信开发者工具才能识别。    

    2024年02月11日
    浏览(71)
  • 微信小程序开发者工具真机调试和预览连接本地服务器

    网上参考了很多方法只有这个方法能解决本地服务器在微信开发者工具预览或者真机调试的连接,话不多说看图。 win+R,CMD输入ipconfig查看本地电脑服务器地址 微信开发者工具里设置代理 js代码的地址对应IPv4 地址 最后你的wifi网络要和手机上的网络一致,不然真机调试或者预

    2024年02月11日
    浏览(103)
  • 解决微信开发者工具企业微信小程序模式下模拟器白屏问题

    前一天晚上没有关电脑,第二天发现电脑自己重启了,然后微信开发者工具就出了问题,在企业微信小程序模式下,模拟器出现了白屏,只有上方title可以正常显示。点击模拟器右上角三个点都不出弹出菜单,并且在调试器可正常显示Wxml和接口调用,手机扫描预览生成的二维

    2024年02月09日
    浏览(61)
  • Uni-app运用HBuilderX和微信web开发者工具做微信小程序

    目录 Uni-app、HBuilderX和微信web开发者工具的介绍 使用HBuilderX时需配置的工具 通过HBuilderX构建项目  配置微信开发者工具 通过HBuilderX将项目运行到微信小程序中  Uni-app中常用的组件及方法 扩展组件的使用方法 结语 Uni-app的介绍: uni-app是一个使用vue.js开发所有前端应用的框架

    2024年02月16日
    浏览(102)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包