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初始化动画加载的实例
今天小编就为大家分享一篇vue初始化动画加载的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue实现原理this.$message实例详解
这篇文章主要介绍了vue实现原理this.$message实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
Vue3中使用ref标签对组件进行操作方法
这篇文章主要介绍了Vue3中使用ref标签对组件进行操作方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
axios二次封装的详细过程与跨域问题
通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加,api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护,下面这篇文章主要给大家介绍了关于axios二次封装的详细过程与跨域问题的相关资料,需要的朋友可以参考下
2022-09-09
Vue computed与watch用法区分
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动，这篇文章简单介绍下Vue中computed和watch的区别异同，感兴趣的朋友一起看看吧
2023-02-02
如何防止Vue组件重复渲染的方法示例
在 Vue.js 中,组件的重复渲染是一个常见的问题,可能会影响应用的性能和用户体验,为了提升应用的性能,开发者需要理解 Vue 的渲染机制,并应用有效的方法来避免不必要的组件重渲染,本文将深入探讨如何防止 Vue 组件重复渲染,并提供相关示例代码,需要的朋友可以参考下
2024-10-10
vue-cli2.x项目优化之引入本地静态库文件的方法
这篇文章主要介绍了vue-cli2.x项目优化之引入本地静态库文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
vue setInterval 定时器失效的解决方式
这篇文章主要介绍了vue setInterval 定时器失效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
webpack+vue.js实现组件化详解
vue的开发体验还是比较愉悦的。首先文档非常友好，所以上手会比较快。其次，配合webpack和vue-loader，每个页面都是一个.vue文件，写起来很方便。所以很适合做组件化开发，这篇文章我们就来一起看看webpack+vue.js如何实现组件化。
2016-10-10
vue用elementui写form表单时,在label里添加空格操作
这篇文章主要介绍了vue用elementui写form表单时,在label里添加空格操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08