Vite 设置 less 全局变量

1、建立一个公共的less变量文件 列如 src/publicStyle/varLess.less

// src/publicStyle/varLess.less
@layout_header: 50px;
@layout_foot: 48px;
@minWidth: 1366px; //屏幕最小宽度
@minHeight: 768px; //屏幕最小高度
@breadcrumbHeight: 40px; //面包屑高度

2、创建一个全局的css文件 列如 src/publicStyle/allCss.less

.layout_foot {
  height: @layout_foot !important;
}

3、创建一个主文件入口（挂在全局使用） 列如 src/publicStyle/index.less

// 将存在需要挂在的css文件全部导入到该文件中
@import './allCss.less';

 

 4、找到main.ts 或 main.js

// 引入即可
import './publicStyle/index.less'

5、使用

<div class="layout_foot">foots</div>