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

vue3 + vite + ts 中使用less文件全局變量的操作方法

 更新時(shí)間：2024年03月02日 10:18:13   作者：小小怪_下士  
這篇文章主要介紹了vue3 + vite + ts 中使用less文件全局變量的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

一、安裝依賴

npm install less less-loader --save-dev

二、新建CSS變量文件

  (1) :在根目錄下的src文件中 src-> asset -> css ->glibal.less

// glibal.less 
:root{
 --public_background_font_Color  :  red;
 --publicHouver_background_Color :#fff ;
 --header_background_Color : #fff ;
 --menu_background : #fff ;
}

三、全局引入css變量文件

 (1)、在根目錄下的vite.config.ts文件夾中添加

export default defineConfig({
  plugins: [
    vue(),
  ],
  //配置css變量
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
})

(2)在src目錄下的mian.ts文件夾中引入自己定義的文件

import './assets/css/global.less';

四、使用css變量

(1)、在user.vue文件中使用

<template>
   <div >
     user頁(yè)面
   </div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
 div{
  width: 100px;
  height: 100px;
  background: var(--public_background_font_Color); //自己定義的變量
 }
</style>

效果:

到此這篇關(guān)于vue3 + vite + ts 中使用less文件全局變量的文章就介紹到這了,更多相關(guān)vue 使用less文件全局變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue初始化動(dòng)畫(huà)加載的實(shí)例

    vue初始化動(dòng)畫(huà)加載的實(shí)例

    今天小編就為大家分享一篇vue初始化動(dòng)畫(huà)加載的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue實(shí)現(xiàn)原理this.$message實(shí)例詳解

    vue實(shí)現(xiàn)原理this.$message實(shí)例詳解

    這篇文章主要介紹了vue實(shí)現(xiàn)原理this.$message實(shí)例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2024-03-03
  • Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法

    Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法

    這篇文章主要介紹了Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-04-04
  • axios二次封裝的詳細(xì)過(guò)程與跨域問(wèn)題

    axios二次封裝的詳細(xì)過(guò)程與跨域問(wèn)題

    通常我們的項(xiàng)目會(huì)越做越大,頁(yè)面也會(huì)越來(lái)越多,隨之而來(lái)的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護(hù),下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細(xì)過(guò)程與跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • Vue computed與watch用法區(qū)分

    Vue computed與watch用法區(qū)分

    watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個(gè)依賴型數(shù)據(jù)發(fā)生變化的時(shí)候,所有依賴這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化,即自動(dòng)調(diào)用相關(guān)的函數(shù),來(lái)實(shí)現(xiàn)數(shù)據(jù)的變動(dòng)，這篇文章簡(jiǎn)單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧
    2023-02-02
  • 如何防止Vue組件重復(fù)渲染的方法示例

    如何防止Vue組件重復(fù)渲染的方法示例

    在 Vue.js 中,組件的重復(fù)渲染是一個(gè)常見(jiàn)的問(wèn)題,可能會(huì)影響應(yīng)用的性能和用戶體驗(yàn),為了提升應(yīng)用的性能,開(kāi)發(fā)者需要理解 Vue 的渲染機(jī)制,并應(yīng)用有效的方法來(lái)避免不必要的組件重渲染,本文將深入探討如何防止 Vue 組件重復(fù)渲染,并提供相關(guān)示例代碼,需要的朋友可以參考下
    2024-10-10
  • vue-cli2.x項(xiàng)目?jī)?yōu)化之引入本地靜態(tài)庫(kù)文件的方法

    vue-cli2.x項(xiàng)目?jī)?yōu)化之引入本地靜態(tài)庫(kù)文件的方法

    這篇文章主要介紹了vue-cli2.x項(xiàng)目?jī)?yōu)化之引入本地靜態(tài)庫(kù)文件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-06-06
  • vue setInterval 定時(shí)器失效的解決方式

    vue setInterval 定時(shí)器失效的解決方式

    這篇文章主要介紹了vue setInterval 定時(shí)器失效的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • webpack+vue.js實(shí)現(xiàn)組件化詳解

    webpack+vue.js實(shí)現(xiàn)組件化詳解

    vue的開(kāi)發(fā)體驗(yàn)還是比較愉悅的。首先文檔非常友好，所以上手會(huì)比較快。其次，配合webpack和vue-loader，每個(gè)頁(yè)面都是一個(gè).vue文件，寫(xiě)起來(lái)很方便。所以很適合做組件化開(kāi)發(fā)，這篇文章我們就來(lái)一起看看webpack+vue.js如何實(shí)現(xiàn)組件化。
    2016-10-10
  • vue用elementui寫(xiě)form表單時(shí),在label里添加空格操作

    vue用elementui寫(xiě)form表單時(shí),在label里添加空格操作

    這篇文章主要介紹了vue用elementui寫(xiě)form表單時(shí),在label里添加空格操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-08-08

最新評(píng)論