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

小小怪_下士

已于 2024-02-26 20:00:02 修改

阅读量1.6k

点赞数 7

文章标签： less 前端 css

于 2024-02-26 17:43:26 首次发布

本文链接：https://blog.csdn.net/qq_45061461/article/details/136305015

版权

本文介绍了如何在Vite项目中安装Less和less-loader，创建全局CSS变量文件，然后在`vite.config.ts`中配置并导入这些变量，最后在user.vue组件中使用自定义的CSS变量实现样式动态调整。

摘要由CSDN通过智能技术生成

文章目录

一、安装依赖

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>

效果: