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>

效果:

相关推荐
剽悍一小兔1 分钟前
小程序发布后,不能强更的情况下,怎么通知到用户需要去更新?
前端
115432031q2 分钟前
基于SpringBoot+Vue实现的旅游景点预约平台功能十三
java·前端·后端
JiangJiang3 分钟前
🧠 面试官:受控组件都分不清?还敢说自己写过 React?
前端·react.js·面试
tianchang3 分钟前
JS 中 Map 的概念与使用
前端·javascript
Jenlybein3 分钟前
[ Javascript 面试题 ]:提取对应的信息,并给其赋予一个颜色,保持幂等性
前端·javascript·面试
Carlos_sam3 分钟前
Opnelayers:向某个方向平移指定的距离
前端·javascript
夜熵4 分钟前
JavaScript 中的 this
前端·面试
前端小巷子6 分钟前
CSS 单位指南
前端·css
St7 分钟前
探索JavaScript原型链设计——详解prototype、__proto__及constructor三者之间的关系
前端·javascript
前端大白话7 分钟前
JavaScript中`Symbol.for()`和`Symbol()`的区别,在创建全局唯一的`Symbol`值时如何选择使用?
前端·javascript·设计模式