vue3 + vite + ts 中使用less文件全局变量

文章目录

• • 安装依赖
  • 新建css变量文件
  • 全局引入css变量文件
  • 使用css变量

一、安装依赖

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文件中使用

user页面   div{width: 100px;height: 100px;background: var(--public_background_font_Color); //自己定义的变量 }

效果: