在React中直接更改LESS变量

Question

是否可以在React端动态更改LESS变量？如果没有，那么最好的方法是什么？

在完成了一些教程之后，我尝试将less-vars-to-js与fs结合使用。但是，不能在反应中使用fs。

base.less

   @theme: 'main';
   @default: '@{theme}-theme';
   @main: '@{theme}-theme';

   @default: #fff;
   @main: #0e2336;

    body {
      & when (@theme = 'main') {
        font-size: 9px;
        color: #fff;
      }
      background-color: @@theme;
      color: #0e2336;
    }

反应：

import './themes/base.less'
import { Switch} from 'antd'
import less from 'less' //this isn't correct, but Im trying to demonstrate what I'd like to do

class App extends React.Component {
        constructor(props) {}
        onChange = checked => {
       if (checked) {
         less.modifyVars({
           '@theme': 'main'
         })
       } else {
         less.modifyVars({
           '@theme': 'default'
         })
       }
       less.refreshStyles()
     }
        render() {
           <Switch defaultChecked onChange={this.onChange} />
}
}