vite项目配置less全局样式

前言

博主最近学习在vite项目中配置less，通过less去配置项目的全局样式，下面是配置步骤

一、安装依赖

首先项目中安装less和less-loader依赖

npm install less
npm install less-loader

二、使用步骤

1.配置vite.config.js

在vite.config.js配置less全局样式，在additionalData里配置全局样式文件路径,文件类型是less,文件位置放在静态文件目录assets下

   css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/assets/style/global.less";',
      },
    },
  },

2.全局样式编写

在全局样式文件里配置主色调 （其他样式如高宽，间距可自行编写）

@color:#63C4D4;

3.组件使用

在有需要的组件内使用该全局样式

 .title{
 	color:@color;
 }

总结

这就在vite项目中配置less全局样式的步骤，如果上述内容存在问题，欢迎大家批评指正！！！