vue3 + vite + ts 中使用less文件全局变量的操作方法
作者：小小怪_下士
这篇文章主要介绍了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文件全局变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！