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。