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

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); // 標題色
@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); // 浮層陰影

總結

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

相關文章

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

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

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

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

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

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

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

    前端Vue項目部署到服務器的全過程以及踩坑記錄

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

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

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

    Vue中Axios中取消請求及阻止重復請求的方法

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

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

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

    Vue3（二）集成Ant Design Vue

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

    為vue項目自動設置請求狀態(tài)的配置方法

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

    Vue屏幕自適應三種實現(xiàn)方法詳解

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

最新評論