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 小时前
elementUI-表单-下拉框数据选中后,视图不更新
前端·javascript·elementui
四岁半儿3 小时前
常用css
前端·css
你的人类朋友4 小时前
说说git的变基
前端·git·后端
姑苏洛言4 小时前
网页作品惊艳亮相!这个浪浪山小妖怪网站太治愈了!
前端
字节逆旅4 小时前
nvm 安装pnpm的异常解决
前端·npm
Jerry4 小时前
Compose 从 View 系统迁移
前端
GIS之路5 小时前
2025年 两院院士 增选有效候选人名单公布
前端
四岁半儿5 小时前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js
烛阴5 小时前
告别繁琐的类型注解:TypeScript 类型推断完全指南
前端·javascript·typescript
gnip5 小时前
工程项目中.env 文件原理
前端·javascript