如何在微信小程序开发中使用less/scss?

1、Vscode 安装 Easy-less

如何在微信小程序开发中使用less/scss?_第1张图片

2、打开微信开发者工具,找到扩展设置按钮(Ctrl+Shift+X)

      点击"..."更多按钮,

      点击“从已解包的扩展文件夹中安装”

如何在微信小程序开发中使用less/scss?_第2张图片

3、找到vscode的文件夹,找到easy-less的扩展文件夹

      扩展文件夹位置:

      Microsoft Windows 系统:C:\Users\用户名\.vscode\extensions

      macOS 系统:~/.vscode/extensions

如何在微信小程序开发中使用less/scss?_第3张图片

4、导入之后在easy-less拓展上面右键点击,

      选择“Extension Setting”,

      在搜索框中输入“easy-less”,

      选择“在settings.json中编辑”

5、在easy-less的setting文件中设置编译后输出文件为wxss

"less.compile": {

    "outExt": ".wxss"

}

如何在微信小程序开发中使用less/scss?_第4张图片

 6、在文件夹内创建一个.less文件

如何在微信小程序开发中使用less/scss?_第5张图片

7、在.less内添加的样式在保存后将会同步编译到.wxss文件内 

如何在微信小程序开发中使用less/scss?_第6张图片

你可能感兴趣的:(css,前端,微信小程序,css,less)