当前位置: 首页 > news >正文

微信小程序里配置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的文件。
 "less.compile": {"compress": false,"sourceMap": false,"out": true,"outExt": ".wxss"}
  1. 接下来,在页面里,可以新建后缀名为less的样式文件,当保存样式时,会自动编译并生成一个同样名字的 .wxss样式文件。
http://www.lryc.cn/news/197908.html

相关文章:

  • MySq修改配置文件
  • HTML 表格及练习
  • YOLOv5-训练自己的VOC格式数据集(VOC、自建数据集)
  • 基于Java的考研信息查询系统设计与实现(源码+lw+部署文档+讲解等)
  • Linux性能优化--性能追踪:受CPU限制的应用程序(GIMP)
  • BERT变体(1):ALBERT、RoBERTa、ELECTRA、SpanBERT
  • 域控操作二:设置域用户使用简单密码
  • python---三目运算符
  • 百度地图定位BMap.GeolocationControl的用法
  • Vue3响应式原理初探
  • firewalld常用的基础配置
  • 功率放大器如何驱动超声波换能器
  • LiveGBS流媒体平台GB/T28181常见问题-安全控制HTTP接口鉴权勾选流地址鉴权后401Unauthorized如何播放调用接口
  • 红帽认证笔记2
  • 程序开发中表示密码时使用 password 还是 passcode?
  • html5 文字自动省略,html中把多余文字转化为省略号的实现方法方法
  • 6.SNMP报错-Error opening specified endpoint “udp6:[::1]:161“处理
  • 集合的进阶
  • 【LeetCode刷题(数据结构与算法)】:数据结构中的常用排序实现数组的升序排列
  • 【HTML+CSS】零碎知识点
  • 嵌入式开发学习之STM32F407串口(USART)收发数据(三)
  • python:talib.BBANDS 画股价-布林线图
  • ESP32网络开发实例-自定义主机名称
  • 【ELK 使用指南 3】Zookeeper、Kafka集群与Filebeat+Kafka+ELK架构(附部署实例)
  • 手写redux的connect方法, 使用了subscribe获取最新数据
  • 数据结构--B树
  • 【音视频|ALSA】基于alsa-lib开发ALSA应用层程序--附带源码
  • 嵌入式养成计划-43----QT QMainWindow中常用类的使用--ui界面文件--资源文件的添加--信号与槽
  • 【Yarn】清除Yarn的缓存,更新Yarn本身、更新项目的依赖项
  • 点云从入门到精通技术详解100篇-雨雾环境下多传感器融合SLAM方法(续)