mpvue小程序开发中配置less支持-成都快上网建站

mpvue小程序开发中配置less支持

问题

开发小程序选定了mpvue框架后,然后是选择理想的小程序组件库,我选择的是Vant Weapp。但是,在Vant Weapp组件毕竟也是有限的,实际问题可能复杂得多。因此,把Vant Weapp组件与小程序原生组件(如swiper等)联合使用,甚至是开发自定义组件都是可能的。另一方面,使用Vant Weapp组件类似库的一个好处是,很大情况下,可以不必关注CSS样式的编写,但也不尽然。今天就遇到这样一个问题。

我们提供的服务有:成都网站设计、成都网站建设、外贸网站建设、微信公众号开发、网站优化、网站认证、盘州ssl等。为上千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的盘州网站制作公司

在mpvue框架时,我自然地使用了官方提供的mpvue-quickstart模板来快速生成一个小程序工程框架,然后再作调整。其中,便是使用了vue-cli,但它默认是不支持更简洁功能更强大的LESS和SASS等CSS样式创建的。但是,很显然,有些情况下,直接使用CSS编写,在样式层级多的情况下,很麻烦,重复性强。这也是引入LESS等的主要原因。那么,能够在使用mpvue框架开发小程序的情况下也引入LESS和SASS等工具支持呢?答案是:没有问题!

办法

第一步:安装less和less-loader
所用命令是:
npm i less less-loader -D

第二步:修改一下webpack.base.conf.js:
如图中红框框出的所示:
mpvue小程序开发中配置less支持

第三步:使用less语法编写样式即可,举例如下:

小结

定义了上述样式后,可以根据需要应用于Vant Weapp组件上,毕竟有些组件默认样式可能不太合乎实际需求。另外,使用上述思路,也可以在mpvue项目中引入sass样式的使用。有兴趣的读者,可以参考文章https://www.jianshu.com/p/31f78fb9e4ba。


网站栏目:mpvue小程序开发中配置less支持
文章出自:http://kswjz.com/article/gpcogh.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流