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 がより少ないグローバル変数を設定する方法を添付します。
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
       }
    }
  }
})