微信小程序引入less并引入公共样式
在原生微信小程序开发中,直接使用wxss来写组件样式是非常麻烦的,它不能进行嵌套书写,也不能声明变量,所以我们经常会引入一些css编译器来辅助我们书写样式,例如less,scss等。
这边我将介绍如何在微信小程序中引入less并引入公共样式。
1.通过vscode引入less
引入之后,需要在设置里找到vscode的setting.json文件进入
进入该文件之后就需要加入以下几行代码,引入之后就可以使用less了
"less.compile": {
"outExt": ".wxss"
},
2.引入之后如何使用less
当我们引入less之后就可以在开发者工具中的app.json中创建一个页面,将生成的wxss改为less,然后在vscode中编写less代码,然后保存,vscode就会自动生成一个相同命名的wxss,这样就引入成功了。文件格式如下:
这样我们可以创建一个styls文件夹,里面有一个common.less的文件,
然后在demo5.less中通过@import引入该文件
这样就可以使用common里的样式以及变量了。
3.如何解决多个less需要引入公共样式的问题
在开发中,如果每个less文件都要引入一次common.less则会发现特别麻烦,因为在开发中页面不一定都在pages文件夹中,还有可能出现分包,组件开发等问题,这个时候引入的路径就会不一样,造成麻烦,所以,解决办法就是在app.wxss中文件引入common.less,写好样式即可。
1.写好common.less样式编译保存
2.在app.wxss引入生成的common.wxss
3.然后直接在相应的页面中引入类名即可
成功引入!!