Vite创建React项目实现全局Less变量的引入使用（包括更改全局颜色）

1.首先确定你的项目是不是Vite创建的

2.在vite.config.ts中配置如下内容即可

import { defineConfig } from 'vite'
import path from "path"
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react() ],
  css: {
    preprocessorOptions: {
      less: {
         //引入了全局的 SCSS 文件 global.scss
          additionalData: `@import "./src/assets/css/variables.less";`,
      }
    }
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src')
    }
  },
  server: {
    host: '0.0.0.0'
  },
  
})

3. variables.less即为引入的全局样式处

@fontsColor: #1e80ff;

4.scss亦是同理 

5.如果想要实现颜色的变化更改

1. 定义 CSS 变量：
   你可以在 Less 文件中定义一个与 CSS 变量对应的 Less 变量，但重要的是要理解这个 Less 变量仅在编译时有用。然后，你可以在编译后的 CSS 中直接使用 CSS 变量

   	// styles/variables.less
   	@primary-color: var(--primary-color, #1e80ff); // 这里我们其实是在为 CSS 变量提供一个回退值

   但是，由于 Less 不直接支持 CSS 变量的定义（它支持使用 CSS 变量，但不支持在 Less 文件中定义它们作为变量的一部分），你需要在 CSS 或直接在 HTML 的 <style> 标签中定义 CSS 变量。为了简化，我们可以在一个全局的 CSS 文件中定义它们：

   	/* global.css */
   	:root {
   	--primary-color: #1e80ff;
   	}

   然后在你的 Less 文件中引用这个全局 CSS 文件（虽然这里不是直接引用 Less 变量，但效果相似）：

   	// 在你的 Less 文件中，你可以简单地使用 CSS 变量，而不需要定义 Less 变量来对应它
   	.my-class {
   	color: var(--primary-color);
   	}

   注意：在实际项目中，你可能不需要在 Less 文件中做这一步，因为你可以直接在 CSS 中使用 CSS 变量，并通过 JavaScript 来改变它们。

2. 在 React 组件中使用：
   现在，你可以在你的 React 组件中通过 JavaScript 来改变 CSS 变量的值。

   	import React, { useState } from 'react';
   	import './global.css'; // 确保导入了定义 CSS 变量的 CSS 文件
   	const ColorSwitcher = () => {
   	const [color, setColor] = useState('#1e80ff'); // 初始颜色与 CSS 变量中的值相同
   	const handleColorChange = () => {
   	// 这里你可以设置为任何你想要的颜色值
   	setColor('#ff0000'); // 例如，切换为红色
   	// 更新 CSS 变量
   	document.documentElement.style.setProperty('--primary-color', color);
   	};
   	return (
   	<div>
   	<p className="my-class">This text will change color.</p>
   	<button onClick={handleColorChange}>Change Color</button>
   	</div>
   	);
   	};
   	export default ColorSwitcher;

   注意，我们在 handleColorChange 函数中直接修改了 :root 元素的 --primary-color CSS 变量。这是因为 CSS 变量是继承的，所以改变 :root 的变量值会影响所有使用这个变量的元素。

3. 确保样式被正确应用：
   确保你的全局 CSS 文件（包含 CSS 变量定义）被正确导入到你的项目中，并且你的 React 组件能够访问到这些变量。

通过这种方式，你可以在 React 项目中结合使用 Less 和 CSS 变量，同时实现动态样式更改。不过，请注意，这种方法实际上并没有直接使用 Less 变量来动态改变样式；相反，它利用了 CSS 变量的动态性质。如果你想要完全基于 Less 变量来工作，并且仍然需要动态改变样式，你可能需要考虑使用其他方法，如 CSS-in-JS 库。