less的使用小技巧以及vite 如何配置less全局变量

1.变量-属性 可用于统一修改，比如特殊节日置灰等

@primaryColor: #f2f2f2;
// 使用
color: @primaryColor

2.变量-选择器 添加项目标识(可用于微前端的样式隔离)

@nameSpace: 'my-app';
// 在组件中使用
@prefix-cls: ~'@{nameSpace}-component1';
.@{prefix-cls} {
	...
}

3.函数 可用于对复杂样式简单处理，用于响应式

// 全局定义
.t(props,pc,h5) when (props = font-size) { // 当传入的属性是font-size  ps：font-size 不建议用%为单位，他是基于body上的字体大小来计算的
	@{props}: (pc / 1920 * 100vw); // 不用使用calc 函数自己会去计算
	@media (max-width: 1200px) {
		@{props}: (pc / 375 * 100vw);
	}
}

.t(props,pc,h5) when (props = font-size) { // 当传入其他属性
	@{props}: (pc / 1920 * 100%)
	@media (max-width: 1200px) {
		@{props}: (pc / 375 * 100%);
	}
}

// 使用
.box{
	.t(width, 200, 100);
	.t(font-size, 20, 18);
}

// 编译后
.box{
	width：calc(200 / 1920 * 100%);
	font-size: calc(20 / 1920 * 100vw);
	
	@media(max-width: 1200px){
		width：calc(200 / 375 * 100%);
		font-size: calc(20 / 375 * 100vw);
	}
}

附上 vite 如何配置less全局变量
在vite.config.js 里添加 css的相关配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx()
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  css: {
    preprocessorOptions: {
       less: {
         modifyVars: {
           hack: `true; @import (reference) "${path.resolve(__dirname, 'src/css/common.less')}";`,  // src/css/common.less 是你需要全局变量 （你定义的定义的方法 和 变量等）
         },
         javascriptEnabled: true
       }
    }
  }
})