如何在 React 中使用 less.modifyVars？

编程问答 2022-05-03

问题描述

我在这里找到了一个在线演示：https://codepen.io/seven-phases-max/pen/dPYxzR

想在我的 React 项目中使用它，但不知何故它不适用于 React。

较少的文件：

@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;

似乎 modifyVars 不起作用。

我创建了一个演示来解释： https://stackblitz.com/edit/react-twpmxg?file=src/App.js

解决方法

  1. 您的第一个问题：less 实例从何而来？ 在codepen的项目设置中，添加了一些javascript库，包括less.js： enter image description here
  1. 如何在我的 React 项目中使用 less.modifyVars？ 首先，您需要将 less 添加到您的项目中（假设您还没有添加）：Using .less files with React 接下来，将 less.js 添加到您的 React 应用程序的 /public/index.html 文件中：
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

最后，像这样引用 less.modifyVars：

//Component.js(x)
window.less.modifyVars({ "cool-variable": red });
window.less.refreshStyles();

注意：解决方案未经测试

javascriptlessreactjsreactjsreactjsreactjs