微信开发者工具配置Less

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 点击如图所示位置—>选择从已解压包的扩展文件包中安装，然后选中下面的文件
链接：https://pan.baidu.com/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;
}