微信小程序里配置less

介绍

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

使用方式

  1. 打开 vscode 编辑器, 在扩展中,搜索less,并安装,如下所示:
  2. 打开微信开发者工具,点击 扩展 按钮, 在更多里,选择 从已解包的扩展文件夹安装,如下所示:
  3. 默认打开的文件夹,就是已经安装的扩展列表,在当前文件夹里,选择 mrcrowl.easy-less-2.0.0文件,点击确定即可,如下所示:
  4. 点击确定后,会提示如下所示的信息,代码扩展导入成功,
  5. 在微信开发者工具里选择顶部的设置按钮,在打开的弹窗页面里选择 编辑器 ----- 更多编辑器设置-----扩展----Easy LESS configuration -------在settings.json中编辑, 如下所示:
  6. 在打开的设置文件里,找到 less.compile 设置项,并添加如下所示的代码,即可将后缀名为less的文件自动编译并转换为后缀名为.wxss的文件。
javascript 复制代码
 "less.compile": {
    "compress": false,
     "sourceMap": false,
     "out": true,
     "outExt": ".wxss"
   }
  1. 接下来,在页面里,可以新建后缀名为less的样式文件,当保存样式时,会自动编译并生成一个同样名字的 .wxss样式文件。
相关推荐
shitian08113 小时前
用轻量云服务器搭建一个开源的商城系统,含小程序和pc端
服务器·小程序·开源
计算机-秋大田4 小时前
基于微信小程序的农场管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
说私域11 小时前
私域流量圈层在新消费时代的机遇与挑战:兼论开源 AI 智能名片、2 + 1 链动模式、S2B2C 商城小程序的应用
人工智能·小程序
亥时科技14 小时前
相亲小程序(源码+文档+部署+讲解)
java·小程序·开源·源代码管理
wayuncn14 小时前
网站小程序app怎么查有没有备案?
小程序
2401_8441379515 小时前
PHP中小学优校管理系统小程序源码
微信·微信小程序·小程序·微信公众平台·微信开放平台
iSee85718 小时前
美团代付微信小程序 read.php 任意文件读取漏洞复现
微信小程序·小程序·php
V+zmm1013418 小时前
小说实体书商城微信小程序ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·ssm·课程设计
V+zmm1013421 小时前
校园服务平台小程序ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·课程设计·1024程序员节
xiaaaa.z1 天前
【小程序】封装网络请求request模块
小程序