Javascript 如何在React中使用较少的.modifyVars？

我在这里找到了一个在线演示：

我想在我的React项目中使用它，但不知何故它与React不兼容

less文件：

@primaryColor: #006699;

.lessTest {
    width: 100px;
    height:100px;
    background-color:@primaryColor;
}

Js文件：

import React, { useEffect } from 'react';
import less from 'less'

function App() {

  useEffect(() => {
        less.modifyVars({ primaryColor: "#ffe4e1" });
        less.refreshStyles();
  }, [])

    return (
        <div className='App'>
            <div className='lessTest'>213</div>
        </div>
    );
}

export default App;

import React，{useffect}来自“React”；
从“更少”导入更少
函数App（）{
useffect（（）=>{
减去修改变量（{primaryColor:#ffe4e1}）；
减。刷新样式（）；
}, [])
返回(
213
);
}
导出默认应用程序；

看来改装车不起作用了

我创建了一个演示来解释：

您的第一个问题：

less

实例来自哪里？ 在codepen的项目设置中，添加了一些javascript库，包括

less.js

：

如何在React项目中使用

less.modifyVars

？ 首先，您需要在项目中添加

更少的
（假设您尚未添加）：
接下来，将
less.js
添加到React应用程序的
/public/index.html
文件中：

最后，参考

less.modifyVars

如下：

//Component.js（x）
window.less.modifyVars（{“cool variable”：red}）；
window.less.refreshStyles（）；

---

注意：解决方案未经测试

谢谢您的回答。在这里，我创建了一个在线演示：，我尝试了另一种方法

var less=require（“less”）。它似乎有效，但更不用说。modifyVars（）不起作用。你能看一下吗？