less组件主要是方便我们在进行样式操作时，进行级联CSS代码书写，这里记录下在微信开发者工具中如何配置Less.
预览配置前后的效果
css格式样式(wxss)
.search_bar {height: 90rpx;padding: 10rpx;background-color: var(--themeColor);}.search_bar navigator {height: 100%;display: flex;justify-content: center;align-items: center;background-color: white;color: #666;border-radius: 10rpx;}.search_bar navigator icon {padding-right: 5rpx;}
less格式
.search_bar{height:90rpx;padding:10rpx;background-color: var(--themeColor);navigator{height:100%;display: flex;justify-content: center;align-items: center;background-color: white;color:#666;border-radius: 10rpx;icon{padding-right: 5rpx;}}}
明显看出，通过less配置后，进行格式调整会更简洁
微信开发者工具引入Less
1 打开菜单栏设置按钮—>选中扩展设置
2 然后点击那个扩展面板
3 点击如图所示位置—>选择从已解压包的扩展文件包中安装，然后选中下面的文件
链接：/s/1Z22LDeePBuPRF0vnSG-ZcA
提取码：258h
下载解压后的文件夹即可
4 配置setting.json，一般微信开发者工具的 setting.json可以通过点击，那个设置图标，选中Extensions setting
5 在弹框中下拉至最下面，这里有两个选项，用户和工作区，用户一般是针对该用户的设置，工作区，仅是针对当前工作区的设置，一般来讲，如果是个人开发，用户的范畴大于工作区，所以在用户那个选项里可以设置自己的less设置。
6 选中这里的 在setting 中编辑 ，加入
“outExt”:".wxss"，加入该句后，我们写的 less 文件，在编译后可自动生成 wxss 文件。当然这个是局部配置，只是在该工程下生效，还可以进行全局配置。
测试
1 新建less文件
2 键入相关信息
.search_bar{height:90rpx;padding:10rpx;background-color: var(--themeColor);navigator{height:100%;display: flex;justify-content: center;align-items: center;background-color: white;color:#666;border-radius: 10rpx;icon{padding-right: 5rpx;}}}/* .sear
3 保存后，发现刚才的文件夹目录中出现了对应的 .wxss 文件
然后发现该文件中出现了：即由less自动生成了 wxss 文件
.search_bar {height: 90rpx;padding: 10rpx;background-color: var(--themeColor);}.search_bar navigator {height: 100%;display: flex;justify-content: center;align-items: center;background-color: white;color: #666;border-radius: 10rpx;}.search_bar navigator icon {padding-right: 5rpx;}
