18910140161

微信小程序下使用less扩展语言开发

2021-11-06 12:51:57

34

记录一下,如何在微信小程序下使用less扩展语言编写样式

使用vscode打开微信小程序项目
在需要使用到less文件的目录下,新建一个index.less文件,如下图所示
image.png安装vscode插件
image.png
安装完毕后需要启用该插件

3.vscode窗口下,按下快捷
CTRL + SHIFT + P
在出现的输入框内输入
open settings
点击下图中所示选项
image.png

4.修改settings.json文件下的内容(可以先搜索是否存在该属性,如果不存在则新增一个)
image.png

"less.compile": {
      "outExt": ".wxss"
    }

按下ctrl + s 保存文件

5.尝试在新增的index.less文件下进行编辑(编辑完毕记得保存),例如

image.png

此时再打开同一路径下的index.wxss文件

image.png

细心的你会发现,wxss文件下为less文件编译后的内容,那么恭喜你,配置成功了。

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航