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