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

小小怪_下士2024-02-27 10:03

文章目录

一、安装依赖

复制代码

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>

效果: