vue2中l(wèi)ess的安裝以及使用教程

更新時間：2022年12月12日 08:53:22 作者：m0_63466615

less是css預處理器,對原先css進行了擴展和補充,下面這篇文章主要給大家介紹了關于vue2中l(wèi)ess的安裝以及使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

1.安裝

1.1 在vue cli2 使用vue init webpack xxx 創(chuàng)建的項目

webpack安裝要考慮less-loader的兼容問題，

npm install less-loader@7.0.0

如果7.0.0不行，就一步一步下探，6.0.0 5.0.0

安裝less-loader成功后，

npm install --save less

安裝less

在webpack.base.config.js的rules里添加

{
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
}

在.vue文件的style區(qū)，加上lang='less'

1.2 在vue cli3中（vue create xxx）

npm install less-loader -- save-dev

npm install less --save-dev

在.vue文件的style區(qū)，加上lang='less'

2.使用

2.1定義變量

@width: 500px;
@height: @width+10px;
@red: #f00;
@transparent: 0.5;
@radius: 30px;

注意變量也可以引用變量

2.2 在屬性中使用變量

#app {
  width: @width;
  height: @height;
  background-color: @red;
}

2.3混合（Mixin）

.border() {
  border-radius: @radius;
  border-color: @red;
}
 
.colors() {
  primary: #3385ff;
  secondary: green;
}
 
#app {
  width: @width;
  height: @height;
  background-color: @red;
  .border();
}

編譯出來就是

#app {
  width: 500px;
  height: 510px;
  background-color: #f00;
  border-radius: 30px;
  border-color: #f00;
}

2.4在引用變量時，做一些運算

  .inner-app {
    width: @width / 2;
    height: @height / 2;
    background-color: #00f;
  }

編譯出來是

.inner-app {
  width: 500px / 2;
  height: 510px / 2;
  background-color: #00f;
}

2.5可以以屬性名作為變量

 .app2 {
    @width: 200px;
    width: @width;
    height: $width;
    background-color: .colors[secondary]; // .colors在上邊Mixin里定義的
  }

編譯出來是

.app2 {
  width: 200px;
  height: 200px;
  background-color: green;
}

2.6引用父元素以及祖先元素（&）

#app {
  width: @width;
  height: @height;
  background-color: @red;
  &:hover {
    opacity: @transparent;
    &::after {
      content: "anc";
    }
    &::before {
      content: "xyt";
    }
  }
}

編譯出來是

#app:hover {
  opacity: 0.5;
}
#app:hover::after {
  content: "anc";
}
#app:hover::before {
  content: "xyt";
}

注意 &引用的是所有父元素和祖先元素

總結

到此這篇關于vue2中l(wèi)ess的安裝以及使用教程的文章就介紹到這了,更多相關vue2 less安裝使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項目時踩到了vue-router傳參的坑（jquery和params），所以決定總結一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧
2018-08-08
關于Vue.nextTick()的正確使用方法淺析
最近在項目中遇到了一個需求，我們通過Vue.nextTick()來解決這一需求，但發(fā)現(xiàn)網上這方面的資料較少，所以自己來總結下，下面這篇文章主要給大家介紹了關于Vue.nextTick()正確使用方法的相關資料，需要的朋友可以參考下。
2017-08-08
vue自動路由-單頁面項目（非build時構建）
這篇文章主要介紹了vue自動路由-單頁面項目（非build時構建）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
VUE使用echarts?5.0以上版本渲染器未導入錯誤問題
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導入錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
解決vue3中使用echart報錯:Cannot read properties of&n
在Vue項目中使用Echarts進行數(shù)據可視化是非常常見的需求,然而有時候在引入Echarts的過程中可能會遇到報錯,本文主要介紹了解決vue3中使用echart報錯:Cannot read properties of undefined (reading ‘type‘),感興趣的可以了解一下
2024-01-01
解決vue路由組件vue-router實例被復用問題
這篇文章介紹了解決vue路由組件vue-router實例被復用的問題，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
Vue中如何實現(xiàn)輪播圖的示例代碼
本篇文章主要介紹了Vue中如何實現(xiàn)輪播圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
vue動態(tài)設置路由權限的主要思路
這篇文章主要給大家介紹了關于vue動態(tài)設置路由權限的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
Vue和React中快速使用Electron的簡單教程
Electron也可以快速地將你的網站打包成一個原生應用發(fā)布,下面這篇文章主要給大家介紹了關于Vue和React中快速使用Electron的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-05-05
vue中多個倒計時實現(xiàn)代碼實例
這篇文章主要介紹了vue中多個倒計時實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03