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语法编写样式即可,举例如下:

<style lang="less">
  .card-goods {
    padding: 10px 0;
    background-color: #fff;
    &__item {
      position: relative;
      background-color: #fafafa;
      .van-checkbox__label {
        width: 100%;
        height: auto; // temp
        padding: 0 10px 0 15px;
        box-sizing: border-box;
      }
      .van-checkbox__icon {
        top: 50%;
        left: 10px;
        z-index: 1;
        position: absolute;
        margin-top: -10px;
      }
      .van-card__price {
        color: #f44;
      }
    }
  }
</style>

小结

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

原文地址:https://blog.51cto.com/zhuxianzhong/2358693

时间: 2024-11-05 20:44:02

mpvue小程序开发中配置less支持的相关文章

第一个mpvue小程序开发总结

前言 说起小程序,其实在去年我都还只试着照着官方文档写过demo的,不过现在这家公司小程序做得比较多,我来之后也参与了几个小程序的开发了,最开始那几个是用的wepy,最近一个开始转用mpvue开发,最近这个项目终于上线了,我也来试着总结回顾一波吧. 关于框架的选择 我刚来现在的公司时,我就了解过有一个小程序框架叫mpvue被美团开源了,有过一个大致的了解.来了公司之后了解到我们公司已经有了一套自己的小程序技术栈那就是基于wepy的,而不是原生小程序,毕竟我们要开发的小程序不是简单的几个页面,而且

解决微信小程序开发中wxss中不能用本地图片

微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方法:将图片用base64加密. 1.我们用在线加密对图片进行加密,这个网址百度一大堆,我只贴出一个http://imgbase64.duoshitong.com/ 2.将转换完成后的base64复制到我们要引用的地方. 3.设置样式(辅助代码,只有将这个图片做为background-image时注意设置如下属

微信小程序开发中wx.redirectTo与wx.navigateTo跳转页面未果

学习小程序开发中难免遇到一些小坑,作者在进行登录功能时遇到登录成功后,页面不可实现跳转到个人中心(admin/admin). 首先大致介绍一下本文的逻辑:验证用户信息后,需跳转页面到个人中心(tabBar页面),采用wx.redirectTo与wx.navigateTo两种方法均未实现,且不报错. 主要原因: admin/admin属于tabBar页面,采用上述两方法不会有任何效果,需采用wx.switchTab法进行跳转. 跳转完成页面: 页面跳转方法: 1.wx.navigateTo 保留当

小程序开发中有趣的事情

小程序开发做了半年了,断断续续地利用课余时间写了一大部分. 期间遇到了很多坑和技巧,个人感觉十分有趣. 1.textarea 小程序里面的textarea是我遇到的第一个坑. textarea 在小程序里面看起来似乎和HTML里的一样,但是页面一滑动就有问题:欸欸欸??卧槽,卧槽,他怎么不动?:如果页面有弹层,弹层弹出的瞬间,卧槽卧槽?这个怎么在最上面?.textarea在小程序里面是原生层级最高的组件,z-index对他没用,并且在swipe.scroll-view.canve里面会出现奇奇怪

9-简单实例(二)小程序开发中应注意的几个问题

前面,我们比较完整地讲了一个开放"知乎新闻"的实例.为什么说比较完整呢?因为只是那么一篇文章,要完整地讲完,谈何容易.反正有渔老师是没这个能力.下面接着来完善上篇文章,希望读者看完后,能更加深刻地认识微信小程序开发. 1.新添加的目录,有没有添加到app.json的pages里? "pages":[ "pages/index/index", "pages/detail/detail" ], 每添加一个页面,就需要把页面的路径写

mpvue小程序开发入门级指南

报错指南 "Error: ERR_GET_SESSION_KEY {"code":5100,"message":"(-1)服务内部错误,请稍后重试或联系客服人员解决." 解决: https://blog.csdn.net/shine_a/article/details/86749030 mpvue编译时出现 "未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译."错误 改变根目录project.c

小程序开发中的一些坑和技巧

前言 最近公司要开发一款电商小程序,匆忙看了一遍文档就开始干活了.整体开发体验个人感觉不太好,特别是如果之前习惯了Vue开发,突然去开发小程序,感觉很鸡肋.以下是我在开发中遇到的一些问题以及解决方法的总结,仅供参考 引入iconfont 在小程序中引入字体图标要比web麻烦一些,简单说需要三步: 下载iconfont,把iconfont.css复制到iconfont.wxss,在app.wxss中引入 查看iconfont在unicode模式下的在线链接,替换iconfont.wxss中的链接为

小程序开发中应注意的事项

独立负责的小程序项目即将收工!现在提前总结一下开发过程中遇到的问题以及如何解决问题,预防下次遇到相关问题时还是无法解决! 一.作为一个想要以成为高级程序员为目标的小白,在动手敲代码前认真分析客户的需求应为重中之重!并且及时和客户沟通,避免自己吧东西做出来后并不符合客户的需求!这无疑加大了自己的工作量,而客户还不满意!同时,重点来了!小本本随时准备记录开发过程中遇到的问题以及客户临时提出的需求! 二.当客户提出录制视频演示时,应准备项目,以及字正腔圆的介绍!用大方自信的方式向客户展示当前的项目,避

mpvue小程序开发之 集成第三方UI框架Vant Weapp UI

集成进第三方的UI框架其实很简单 这里把vant-weapp的dist目录重命名为vant-weapp放在项目根目录的static文件夹下: 在src文件夹下,即我们写vue代码的位置,正在编写的页面中添加main.json文件(vue代码编译成小程序代码时会直接使用这个文件) { "usingComponents": { "van-button": "/static/vant-weapp/button/index" //这个路径是指根目录下st