欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vite+vue3全局定義less變量在單文件中使用方式

 更新時(shí)間：2024年03月21日 09:23:23   作者：V_AYA_V  
這篇文章主要介紹了vite+vue3全局定義less變量在單文件中使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vite+vue3全局定義less變量在單文件使用

最近在探究使用vite+vue3搭建一個(gè)后臺框架，為了更好的擴(kuò)展性，將系統(tǒng)可能用到的所有顏色以及部分屬性定義變量作為單獨(dú)的less文件。

在全局的index.less中定義之后，在其它文件使用直接報(bào)錯(cuò)，提示@primary-color為undefined

解決方案

在vite配置文件css中加上modifyVars。

重啟項(xiàng)目就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; // 錯(cuò)誤色
@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é)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

相關(guān)文章

  • Vue中使用vue-plugin-hiprint插件進(jìn)行打印的功能實(shí)現(xiàn)

    Vue中使用vue-plugin-hiprint插件進(jìn)行打印的功能實(shí)現(xiàn)

    hiprint 是一個(gè)web 打印的js組件,無需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動(dòng)端,PC端瀏覽器,angular,vue,react 等 分頁預(yù)覽,打印,操作簡單,運(yùn)行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進(jìn)行打印,需要的朋友可以參考下
    2025-04-04
  • Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例

    Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例

    這篇文章主要為大家介紹了Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-01-01
  • vue使用JSON編輯器:vue-json-editor詳解

    vue使用JSON編輯器:vue-json-editor詳解

    文章介紹了如何在Vue項(xiàng)目中使用JSON編輯器插件`vue-json-editor`,包括安裝、引入、注冊和使用示例,通過這些步驟,用戶可以在Vue應(yīng)用中輕松實(shí)現(xiàn)JSON數(shù)據(jù)的編輯功能,文章最后呼吁大家支持腳本之家
    2025-01-01
  • 前端Vue項(xiàng)目部署到服務(wù)器的全過程以及踩坑記錄

    前端Vue項(xiàng)目部署到服務(wù)器的全過程以及踩坑記錄

    使用Vue做前后端分離項(xiàng)目時(shí),通常前端是單獨(dú)部署,用戶訪問的也是前端項(xiàng)目地址,因此前端開發(fā)人員很有必要熟悉一下項(xiàng)目部署的流程,下面這篇文章主要給大家介紹了關(guān)于前端Vue項(xiàng)目部署到服務(wù)器的全過程以及踩坑記錄的相關(guān)資料,需要的朋友可以參考下
    2023-05-05
  • Vue2.0 UI框架ElementUI使用方法詳解

    Vue2.0 UI框架ElementUI使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了Vue2.0 UI框架ElementUI的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-04-04
  • Vue中Axios中取消請求及阻止重復(fù)請求的方法

    Vue中Axios中取消請求及阻止重復(fù)請求的方法

    為了防止用戶在網(wǎng)絡(luò)不好或者其他情況下短時(shí)間內(nèi)重復(fù)進(jìn)行接口請求，重復(fù)發(fā)送多次請求，本文主要介紹了Vue中Axios中取消請求及阻止重復(fù)請求的方法，感興趣的可以了解一下
    2022-02-02
  • vue3使用高德地圖進(jìn)行軌跡繪制及播放代碼示例

    vue3使用高德地圖進(jìn)行軌跡繪制及播放代碼示例

    這篇文章主要介紹了如何定義地圖容器及操作按鈕,使用高德地圖API進(jìn)行軌跡繪制及播放的方法,并強(qiáng)調(diào)了界面樣式的重要性,高德地圖API的使用需要注冊獲取key,并且設(shè)置了地圖容器的大小,需要的朋友可以參考下
    2024-11-11
  • Vue3（二）集成Ant Design Vue

    Vue3（二）集成Ant Design Vue

    上一篇文章我們介紹了利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目（一），接下來就來看看Vue3集成Ant Design Vue 的相關(guān)資料，需要的小伙伴可以參考一下文章的具體內(nèi)容
    2021-10-10
  • 為vue項(xiàng)目自動(dòng)設(shè)置請求狀態(tài)的配置方法

    為vue項(xiàng)目自動(dòng)設(shè)置請求狀態(tài)的配置方法

    這篇文章主要介紹了vue項(xiàng)目自動(dòng)設(shè)置請求狀態(tài)的配置方法,本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-06-06
  • Vue屏幕自適應(yīng)三種實(shí)現(xiàn)方法詳解

    Vue屏幕自適應(yīng)三種實(shí)現(xiàn)方法詳解

    在實(shí)際業(yè)務(wù)中，我們常用圖表來做數(shù)據(jù)統(tǒng)計(jì)，數(shù)據(jù)展示，數(shù)據(jù)可視化等比較直觀的方式來達(dá)到一目了然的數(shù)據(jù)查看，但在大屏開發(fā)過程中，常會因?yàn)檫m配不同屏幕而感到困擾，下面我們來解決一下這個(gè)不算難題的難題
    2022-11-11

最新評論