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

问题

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

在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：
如图中红框框出的所示：

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

小结

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

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