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

更新时间：2024年03月02日 10:18:13 作者：小小怪_下士

这篇文章主要介绍了vue3 + vite + ts 中使用less文件全局变量的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

一、安装依赖

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页面
   </div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
 div{
  width: 100px;
  height: 100px;
  background: var(--public_background_font_Color); //自己定义的变量
 }
</style>

效果:

到此这篇关于vue3 + vite + ts 中使用less文件全局变量的文章就介绍到这了,更多相关vue 使用less文件全局变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue中computed及watch区别实例解析
这篇文章主要介绍了Vue中computed及watch区别实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
vue中的事件绑定举例详解
这篇文章主要给大家介绍了关于vue中事件绑定的相关资料,事件绑定在Web开发中非常常见,我们经常需要在页面中为某个DOM元素绑定事件,如点击、鼠标移动、键盘敲击等等,需要的朋友可以参考下
2023-09-09
vue在自定义组件中使用v-model进行数据绑定的方法
这篇文章主要介绍了vue在自定义组件中使用v-model进行数据绑定的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
VUE递归树形实现多级列表
这篇文章主要为大家详细介绍了VUE递归树形实现多级列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
解析VUE中nextTick是什么
nextTick是Vue提供的一个全局API，由于Vue的异步更新策略导致我们对数据的修改不会立刻体现，在DOM变化上，此时如果想要立即获取更新后的DOM状态，就需要使用这个方法，这篇文章主要介绍了解析VUE中nextTick,需要的朋友可以参考下
2022-11-11
vuejs手把手教你写一个完整的购物车实例代码
这篇文章主要介绍了vuejs-手把手教你写一个完整的购物车实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
VueX模块的具体使用(小白教程)
这篇文章主要介绍了VueX模块的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue项目history模式刷新404问题解决办法
这篇文章主要给大家介绍了关于vue项目history模式刷新404问题的解决办法,需要的朋友可以参考下
2023-11-11
element-plus中如何实现按需导入与全局导入
本文主要介绍了element-plus中如何实现按需导入与全局导入，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
这篇文章主要介绍了解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07