微信小程序引入less并引入公共样式

微信小程序引入less并引入公共样式

在原生微信小程序开发中,直接使用wxss来写组件样式是非常麻烦的,它不能进行嵌套书写,也不能声明变量,所以我们经常会引入一些css编译器来辅助我们书写样式,例如less,scss等。
这边我将介绍如何在微信小程序中引入less并引入公共样式。

1.通过vscode引入less

微信小程序引入less并引入公共样式_第1张图片
引入之后,需要在设置里找到vscode的setting.json文件进入
微信小程序引入less并引入公共样式_第2张图片
进入该文件之后就需要加入以下几行代码,引入之后就可以使用less了

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

微信小程序引入less并引入公共样式_第3张图片

2.引入之后如何使用less

当我们引入less之后就可以在开发者工具中的app.json中创建一个页面,将生成的wxss改为less,然后在vscode中编写less代码,然后保存,vscode就会自动生成一个相同命名的wxss,这样就引入成功了。文件格式如下:
微信小程序引入less并引入公共样式_第4张图片
这样我们可以创建一个styls文件夹,里面有一个common.less的文件,
然后在demo5.less中通过@import引入该文件
微信小程序引入less并引入公共样式_第5张图片
这样就可以使用common里的样式以及变量了。

3.如何解决多个less需要引入公共样式的问题

在开发中,如果每个less文件都要引入一次common.less则会发现特别麻烦,因为在开发中页面不一定都在pages文件夹中,还有可能出现分包,组件开发等问题,这个时候引入的路径就会不一样,造成麻烦,所以,解决办法就是在app.wxss中文件引入common.less,写好样式即可。
1.写好common.less样式编译保存
微信小程序引入less并引入公共样式_第6张图片
2.在app.wxss引入生成的common.wxss
微信小程序引入less并引入公共样式_第7张图片
3.然后直接在相应的页面中引入类名即可
微信小程序引入less并引入公共样式_第8张图片
微信小程序引入less并引入公共样式_第9张图片
成功引入!!

你可能感兴趣的:(小程序)