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 +Element基础上实现表格列表页面的查询，列表展示和字段转义处理。2021-05-05
最近做项目遇到这样的需求,需要上传的文件格式必须是pdf格式,方便我们查看,本文给大家分享element上传文件对格式限制的处理方案,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要为大家详细介绍了基于vue2实现左滑删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了Vue中的 DOM与Diff详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助2022-08-08
手把手教大家搭建安装基于windows的Vue.js的运行环境，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了vue表单验证之禁止input输入框输入空格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
这篇文章主要介绍了vue动态添加路由addRoutes之不能将动态路由存入缓存的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要为大家详细介绍了vue实现购物车的小练习，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
如何在Vue3中正确使用ElementPlus,亲测有效,避坑
这篇文章主要介绍了如何在Vue3中正确使用ElementPlus,亲测有效,避坑！具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue 如何import服务器上的js配置文件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
最新评论