關于Less在Vue中的使用方法介紹
更新時間：2023年10月20日 08:58:53 作者：qq_45736969
最近發(fā)現(xiàn)好多小伙伴在面試的過程中會問到vue如何使用less和scss，所以下面這篇文章主要給大家介紹了關于Less在Vue中的使用方法,需要的朋友可以參考下
前言：
先說我的問題。我們的vue項目整體顏色風格做了調(diào)整，甲方要求本次要將所有與顏色相關的當要單獨提取出來，放在一個文件里，方便后期更好地維護。這時候我認為用less是個很好的選擇，可以將所有的公用顏色自定義，在需要的頁面通過變量的形式引用。接下來說方法。
1、首先需要安裝less和less-loader依賴
注意less-loader的版本不要太高，不然可能無法使用，以下的安裝命令指定了下載版本?？梢韵炔榭匆韵马椖恐械膒ackage.json文件。如果有l(wèi)ess和less-load，以下這個命令可以省略。
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)不同的預處理選擇，選擇less點擊回車。以上兩個步驟結(jié)束之后，你的package.json文件中會多出以下依賴：
并且，在vue.config.js文件中會增加以下配置：（紅色框內(nèi)是你存放less文件的路徑)
3、下面我們來創(chuàng)建一個less。
可選擇在assets目錄下建一個css文件夾，專門用來存放less文件。并在里面自定義幾個變量。
4、在main.js文件中全局引用這個less文件（注意你自己的less文件存放位置，路徑不要寫錯）
5、哪里需要哪里使用
注意style標簽一定要加上 lang='less'
總結(jié)
到此這篇關于Less在Vue中的使用方法介紹的文章就介紹到這了,更多相關Vue中使用Less內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue使用element-ui tabs切換echarts解決寬度100%方式
這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue基于element的區(qū)間選擇組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
解決Vue keep-alive 調(diào)用 $destory() 頁面不再被緩存的情況
這篇文章主要介紹了解決Vue keep-alive 調(diào)用 $destory() 頁面不再被緩存的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue3 全局使用按鈕截流指令示例代碼,Vue2與Vue3中的自定義指令實現(xiàn)方式略有不同，但實現(xiàn)的按鈕截流功能是類似的，本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
本文主要介紹了VUE3封裝一個Hook的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01
這篇文章主要為大家介紹了Vue.nextTick使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了nuxtjs中如何對axios二次封裝問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Element--el-tabs固定在頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue使得大屏自適應的多種方法,自適屏幕，始終保持16:9的比例，還一種是使用CSS scale屬性對大屏幕做自適應處理，需要的朋友可以參考下2023-10-10
這篇文章主要介紹了通過命令創(chuàng)建vue項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07