vite+vue3全局定義less變量在單文件中使用方式
更新時間：2024年03月21日 09:23:23 作者：V_AYA_V
這篇文章主要介紹了vite+vue3全局定義less變量在單文件中使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vite+vue3全局定義less變量在單文件使用
最近在探究使用vite+vue3搭建一個后臺框架，為了更好的擴展性，將系統(tǒng)可能用到的所有顏色以及部分屬性定義變量作為單獨的less文件。
在全局的index.less中定義之后，在其它文件使用直接報錯，提示@primary-color為undefined
解決方案
在vite配置文件css中加上modifyVars。
重啟項目就ok了
// vite.config.js
...
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: `true; @import (reference) "${path.resolve('src/styles/color.less')}";`,
},
javascriptEnabled: true
}
}
},
...
附上color.less，嫖的antd-design-vue
@primary-color: #1890ff; // 全局主色 @link-color: #1890ff; // 鏈接色 @success-color: #52c41a; // 成功色 @warning-color: #faad14; // 警告色 @error-color: #f5222d; // 錯誤色 @font-size-base: 14px; // 主字號 @heading-color: rgba(0, 0, 0, 0.85); // 標(biāo)題色 @text-color: rgba(0, 0, 0, 0.65); // 主文本色 @text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色 @disabled-color: rgba(0, 0, 0, 0.25); // 失效色 @border-radius-base: 4px; // 組件/浮層圓角 @border-color-base: #d9d9d9; // 邊框色 @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮層陰影
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 Element-plus el-menu無限級菜單組件封裝過程
對于element中提供給我們的el-menu組件最多可以實現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進(jìn)行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無限級菜單組件封裝,需要的朋友可以參考下2023-04-04
今天小編就為大家分享一篇Vuex,iView UI面包屑導(dǎo)航使用擴展詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue如何實現(xiàn)二進(jìn)制流文件導(dǎo)出excel
這篇文章主要介紹了vue如何實現(xiàn)二進(jìn)制流文件導(dǎo)出excel，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue3中toRef與toRefs的區(qū)別，toRefs與toRef功能一致，但可以批量創(chuàng)建多個ref對象，需要注意的是它只會解析對象的第一層屬性，語法直接傳入對象 toRefs，下面更多內(nèi)容的介紹需要的小伙伴可以參考一下2022-03-03
Vue.js樣式動態(tài)綁定實現(xiàn)小結(jié)
這篇文章主要介紹了Vue.js樣式動態(tài)綁定實現(xiàn)小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
今天小編就為大家分享一篇在Vue項目中,防止頁面被縮放和放大示例，具有很好的參考 價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue CL3 配置路徑別名詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue項目中字符串換行顯示方式(返回的數(shù)據(jù)包含‘\r\n’字符)
這篇文章主要介紹了vue項目中字符串換行顯示方式(返回的數(shù)據(jù)包含‘\r\n’字符)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue實現(xiàn)對highlight-current-row方式整行選中后修改默認(rèn)背景顏色
這篇文章主要介紹了vue實現(xiàn)對highlight-current-row方式整行選中后修改默認(rèn)背景顏色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
貪吃蛇游戲想必是很多70、80后的回憶，一直到現(xiàn)在也深受大家的喜歡。本文將利用Vue+uniapp實現(xiàn)這一經(jīng)典的游戲，感興趣的可以了解一下2022-04-04