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.如果想要实现颜色的变化更改
-
定义 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 来改变它们。
-
在 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-colorCSS 变量。这是因为 CSS 变量是继承的，所以改变:root的变量值会影响所有使用这个变量的元素。 -
确保样式被正确应用：
确保你的全局 CSS 文件（包含 CSS 变量定义）被正确导入到你的项目中，并且你的 React 组件能够访问到这些变量。
通过这种方式，你可以在 React 项目中结合使用 Less 和 CSS 变量，同时实现动态样式更改。不过，请注意，这种方法实际上并没有直接使用 Less 变量来动态改变样式；相反，它利用了 CSS 变量的动态性质。如果你想要完全基于 Less 变量来工作，并且仍然需要动态改变样式，你可能需要考虑使用其他方法，如 CSS-in-JS 库。
