關(guān)于Less在Vue中的使用方法介紹
前言：
先說我的問題。我們的vue項(xiàng)目整體顏色風(fēng)格做了調(diào)整，甲方要求本次要將所有與顏色相關(guān)的當(dāng)要單獨(dú)提取出來，放在一個(gè)文件里，方便后期更好地維護(hù)。這時(shí)候我認(rèn)為用less是個(gè)很好的選擇，可以將所有的公用顏色自定義，在需要的頁面通過變量的形式引用。接下來說方法。
1、首先需要安裝less和less-loader依賴
注意less-loader的版本不要太高，不然可能無法使用，以下的安裝命令指定了下載版本?？梢韵炔榭匆韵马?xiàng)目中的package.json文件。如果有l(wèi)ess和less-load，以下這個(gè)命令可以省略。
npm install --save less@3.11.1 less-loader@5
2、安裝 style-resources-loader和vue-cli-plugin-style-resources-loader用于全局配置less。
vue add style-resources-loader
在輸入此命令后，會出現(xiàn)不同的預(yù)處理選擇，選擇less點(diǎn)擊回車。以上兩個(gè)步驟結(jié)束之后，你的package.json文件中會多出以下依賴：
并且，在vue.config.js文件中會增加以下配置：（紅色框內(nèi)是你存放less文件的路徑)
3、下面我們來創(chuàng)建一個(gè)less。
可選擇在assets目錄下建一個(gè)css文件夾，專門用來存放less文件。并在里面自定義幾個(gè)變量。
4、在main.js文件中全局引用這個(gè)less文件（注意你自己的less文件存放位置，路徑不要寫錯(cuò)）
5、哪里需要哪里使用
注意style標(biāo)簽一定要加上 lang='less'
總結(jié)
到此這篇關(guān)于Less在Vue中的使用方法介紹的文章就介紹到這了,更多相關(guān)Vue中使用Less內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了解決vue中監(jiān)聽返回鍵問題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue中使用geobuf的示例詳細(xì)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04
vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue更改頭像功能實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue3 update:modelValue用法小結(jié)
本文主要介紹了vue3 update:modelValue用法小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-12-12
今天小編就為大家分享一篇解決vue數(shù)組中對象屬性變化頁面不渲染問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要和大家一起學(xué)習(xí)vue.js的計(jì)算屬性，分享一些計(jì)算屬性練習(xí)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Element-UI結(jié)合遞歸組件實(shí)現(xiàn)后臺管理系統(tǒng)左側(cè)菜單
在Vue.js中使用遞歸組件可以方便地構(gòu)建多層級的菜單結(jié)構(gòu),遞歸組件適用于處理具有嵌套關(guān)系的數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
這篇文章主要介紹了Vue實(shí)現(xiàn)靠邊懸浮球(PC端)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
本文主要介紹了vue2之vue.config.js最全配置教程,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06