mpvue小程序开发中配置less支持-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

mpvue小程序开发中配置less支持-创新互联

问题

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

创新互联公司是一家专注于成都网站建设、网站建设与策划设计,尼开远网站建设哪家好?创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:尼开远等地区。尼开远做网站价格咨询:13518219792

在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。

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前题目:mpvue小程序开发中配置less支持-创新互联
当前地址:http://kswsj.cn/article/dhgisi.html

其他资讯