微信小程序里配置less

news/2024/7/20 4:34:05 标签: 微信小程序, 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.niftyadmin.cn/n/5096030.html

相关文章

符尧:别卷大模型训练了,来卷数据吧!【干货十足】

大家好,我是HxShine。 今天分享一篇符尧大佬的一篇数据工程(Data Engineering)的文章,解释了speed of grokking指标是什么,分析了数据工程(data engineering)包括mix ratio(数据混合…

语法分析出错,不是 GROUP BY 表达式

报错 ### Cause: dm.jdbc.driver.DMException: 第 9 行, 第 69 列[30]附近出现错误: 语法分析出错 ; bad SQL grammar []; nested exception is dm.jdbc.driver.DMException: 第 9 行, 第 69 列[30]附近出现错误: 语法分析出错at org.springframework.jdbc.support.SQLState…

nginx优先级和匹配方式

在http模块有server server中才有location location匹配的是uri Nginx正则表达式: ^:字符串的起始位置 $:字符串的结束位置 *:匹配所有 :匹配前面的字符一次或多次 ?:匹配前面的字符0次或…

Window 窗口函数 (Spark Sql)

在 Spark SQL 中,Window 函数是一种用于在查询结果集中执行聚合、排序和分析操作的强大工具。它允许你在查询中创建一个窗口,然后对窗口内的数据进行聚合计算。 import org.apache.spark.sql.expressions.Window import org.apache.spark.sql.functions…

Java 获取请求真实IP

获取IP地址为 127.0.0.1, 或者内网地址 Nginx配置, 只有 proxy_pass 时只能获取到 127.0.0.1 location / {proxy_pass http://127.0.0.1:8080; }修改为 location / {#保留代理之前的host 包含客户端真实的域名和端口号proxy_set_header Host $host; #保留代理之前的真实客…

YAML中定义变量

目录 基础准备添加依赖PersonDeptControllerYAML 配置 解释总结普通属性对象 基础准备 添加依赖 <!-- 一般具有spring-boot-starter都会有 &#xff0c;一般不需要导入--><!-- 如果显示缺少ConfigurationProperties 就可以导入一下--><dependency><group…

小觅相机标定记录

过程记录 硬件&#xff1a; 小觅相机&#xff0c;具体型号未知&#xff0c;需后续查找询问。 ubuntu20.04 kalibr 双目相机标定 打开相机 source ~/tools/MYNT_EYE/MYNT_EYE_D/wrapper/ros/devel/setup.bash roslaunch mynteye_wrapper_d display.launch降低采样频率 rosr…

树叶识别系统python+Django网页界面+TensorFlow+算法模型+数据集+图像识别分类

一、介绍 树叶识别系统。使用Python作为主要编程语言开发&#xff0c;通过收集常见的6中树叶&#xff08;‘广玉兰’, ‘杜鹃’, ‘梧桐’, ‘樟叶’, ‘芭蕉’, ‘银杏’&#xff09;图片作为数据集&#xff0c;然后使用TensorFlow搭建ResNet50算法网络模型&#xff0c;通过对…