微信小程序里配置less

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

介绍

在微信小程序里,样式文件的后缀名都是wxss,这导致一个问题,就是页面样式过多的时候,要写很多的类名来包裹,加大了工作量,还很有可能会写错样式。这时可以配置一个less,会大大提高代码编辑质量。文章来源地址https://www.toymoban.com/news/detail-723719.html

使用方式

  1. 打开 vscode 编辑器, 在扩展中,搜索less,并安装,如下所示:
    微信小程序里配置less,微信小程序,微信小程序,less,小程序
  2. 打开微信开发者工具,点击 扩展 按钮, 在更多里,选择 从已解包的扩展文件夹安装,如下所示:
    微信小程序里配置less,微信小程序,微信小程序,less,小程序
  3. 默认打开的文件夹,就是已经安装的扩展列表,在当前文件夹里,选择 mrcrowl.easy-less-2.0.0文件,点击确定即可,如下所示:
    微信小程序里配置less,微信小程序,微信小程序,less,小程序
  4. 点击确定后,会提示如下所示的信息,代码扩展导入成功,
    微信小程序里配置less,微信小程序,微信小程序,less,小程序
  5. 在微信开发者工具里选择顶部的设置按钮,在打开的弹窗页面里选择 编辑器 ----- 更多编辑器设置-----扩展----Easy LESS configuration -------在settings.json中编辑, 如下所示:
    微信小程序里配置less,微信小程序,微信小程序,less,小程序
  6. 在打开的设置文件里,找到 less.compile 设置项,并添加如下所示的代码,即可将后缀名为less的文件自动编译并转换为后缀名为.wxss的文件。
 "less.compile": {
    "compress": false,
     "sourceMap": false,
     "out": true,
     "outExt": ".wxss"
   }
  1. 接下来,在页面里,可以新建后缀名为less的样式文件,当保存样式时,会自动编译并生成一个同样名字的 .wxss样式文件。

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

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

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

相关文章

  • 微信小程序ts+less模版引入Rant Weapp

    选择:不使用云服务 / ts+less https://vant-contrib.gitee.io/vant-weapp/#/quickstart 我使用以下方式 1、第一步 2、第二步 3、第三步 4、第四步 5、第五步 6、第六步 7、第七步

    2024年02月02日
    浏览(37)
  • 如何在微信小程序中使用less来编写css

    在微信小程序中使用 Less 需要一些额外的配置步骤,因为小程序本身不支持直接引用 Less 文件。我们可以借助 Webpack 进行构建,使用一些 loader 来编译 Less 文件。以下是具体步骤: 初始化项目 使用微信开发者工具新建一个小程序项目,或在已有项目的基础上操作。 安装依赖 使用

    2024年04月09日
    浏览(61)
  • 微信小程序 全局配置||微信小程序 页面配置||微信小程序 sitemap配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 以下是一个包含了部分常用配置选项的 app.json : 每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配

    2024年02月01日
    浏览(44)
  • 【微信小程序 | 实战开发】配置微信小程序APPID并快速接入

    你是否想要掌握人工智能的最新技术和应用?你是否想要成为未来社会的创新者和领导者?你是否想要和全球的优秀导师和同学一起学习和交流?如果你的答案是肯定的,那么欢迎来到床长人工智能教程网站,这里是你实现梦想的起点! 个人名片: 🐼 作者简介:一名大一在

    2024年01月24日
    浏览(63)
  • 微信小程序配置

    一、微信小程序配置 1.全局配置:我们在app.json文件下对小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时、Tab等 在app.json文件下具有很多的配置项,我们在下边介绍 2. 二、app.json中的配置项(除了Pages都不是必须项) 1. entryPagePath :小程序默认启动的首页

    2024年02月11日
    浏览(38)
  • 微信小程序全局配置

    小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下: ① pages 记录当前小程序所有页面的存放路径 ② window 全局设置小程序窗口的外观 ③ tabBar 设置小程序底部的 tabBar 效果 ④ style 是否启用新版的组件样式  设置步骤:app.json - window - navigationBarTitle

    2024年04月17日
    浏览(36)
  • 微信小程序-----全局配置与页面配置

    目录 前言 全局配置文件 一、window 1. 小程序窗口的组成部分 2. window 节点常用的配置项 3. 设置导航栏的标题  4. 设置导航栏的背景色  5. 设置导航栏的标题颜色 6. 全局开启下拉刷新功能 7. 设置下拉刷新时窗口的背景色 8. 设置下拉刷新时 loading 的样式 9. 设置上拉触底的距离

    2024年01月17日
    浏览(45)
  • 微信小程序全局配置详解

    登录网址 https://mp.weixin.qq.com/ 注册网址 https://mp.weixin.qq.com/cgi-bin/wx?token=lang=zh_CN 下载地址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 描述整体的app app.js 小程序逻辑 app.json 小程序公共配置 app.wxss 小程序公共样式表 描述各自页面的page 为了方便开发者减少配置项,

    2024年02月13日
    浏览(45)
  • 微信小程序-模板与配置

    1、数据绑定 1.1、数据绑定的基本原则 在 data 中定义数据 在 WXML 中使用数据 1.2、在 data 中定义页面的数据 1.3、Mustache 语法的格式 1.4、Mustache 语法的应用场景 绑定内容 绑定属性 运算(三元运算、算术运算等) 1.5、动态绑定内容 1.6、动态绑定属性 1.7、三元运算 1.8、算数运

    2024年02月09日
    浏览(47)
  • 微信小程序配置绝对路径

    不多BB,直接上代码示例,跟着配就行  1.在app.json下配置自定义模块映射规则 resolveAlias  2.使用方式,以js中为例 就这么简单,别再说微信小程序不支持绝对路径了。

    2024年02月11日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包