vite項目配置less全局樣式的實現(xiàn)步驟
更新時間：2024年02月26日 11:51:44 作者：bug別找我
最近想實現(xiàn)個項目,需要配置全局less,本文主要介紹了vite項目配置less全局樣式的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
博主最近學(xué)習(xí)在vite項目中配置less，通過less去配置項目的全局樣式，下面是配置步驟
一、安裝依賴
首先項目中安裝less和less-loader依賴
npm install less npm install less-loader
二、使用步驟
1.配置vite.config.js
在vite.config.js配置less全局樣式，在additionalData里配置全局樣式文件路徑,文件類型是less,文件位置放在靜態(tài)文件目錄assets下
css: {
// css預(yù)處理器
preprocessorOptions: {
less: {
charset: false,
additionalData: '@import "./src/assets/style/global.less";',
},
},
},
2.全局樣式編寫
在全局樣式文件里配置主色調(diào) （其他樣式如高寬，間距可自行編寫）
@color:#63C4D4;
3.組件使用
在有需要的組件內(nèi)使用該全局樣式
.title{
color:@color;
}
總結(jié)
這就在vite項目中配置less全局樣式的步驟，更多相關(guān)vite配置less全局樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3如何實現(xiàn)錨點定位點擊滾動高亮問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項2022-09-09
圖文詳解Element-UI中自定義修改el-table樣式
elementUI提供的組件間距、樣式都比較大,如果直接套用,在頁面顯示可能就會顯得很大,就比如表格,表頭、行寬如果不修改的話,遇到列較多的時候,會顯得整個頁面就不好看,下面這篇文章主要給大家介紹了關(guān)于Element-UI中自定義修改el-table樣式的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue-cli創(chuàng)建項目從單頁面到多頁面的方法
本篇文章主要介紹了Vue-cli創(chuàng)建項目從單頁面到多頁面的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue3+Vite+TS實現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga
這篇文章主要介紹了在Vue3+Vite+TS的基礎(chǔ)上實現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga，下面文章也將圍繞實現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga的相關(guān)介紹展開相關(guān)內(nèi)容，具有一定的參考價值，需要的小伙伴可惡意參考一下2021-12-12
這篇文章主要為大家詳細介紹了基于canvas實現(xiàn)簡易的手寫簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
vue實現(xiàn)從外部修改組件內(nèi)部的變量的值
這篇文章主要介紹了vue實現(xiàn)從外部修改組件內(nèi)部的變量的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了超詳細的5個Shell腳本實例分享(值得收藏),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
本篇文章主要介紹了簡單的 Vue SSR的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本篇文章主要介紹了VUE元素的隱藏和顯示（v-show指令)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06