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全局样式的步骤，更多相关vite配置less全局样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！