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

微信小程序引入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.然后直接在相应的页面中引入类名即可


成功引入！！