如何使用 React Rsuite 库创建自定义 Less 主题

Question

有没有人使用过 Rsuite 库 (https://rsuitejs.com/en/guide/themes)。我正在尝试创建自定义主题，但无法按照他们的说明进行操作。我安装了以下依赖项：customize-cra、less、less-loader、react-app-rewire-less 和 react-app-rewired。另外，我不确定在哪里导入默认和自定义 .less 文件：

少进口 如下创建一个单独的.less文件，然后引入这个文件。

@import '~rsuite/styles/less/index.less'; //The default style file.
@import 'custom-theme.less'; // Style customization.

到目前为止，我的 config.override.js 看起来像：

const { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
    fixBabelImports("babel-plugin-import", {
        libraryName: 'rsuite',
        libraryDirectory: 'styles',
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        importLoaders: true,
    })
);

fixBabelImports 对我来说很难，因为我在尝试编译时不断收到此错误：

找不到模块：无法解析“/Users/kristenbaldwin/mreb-2/src/components/Navigation”中的“rsuite/styles/dropdown”

这是我的导航组件：

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, NavLink } from 'react-router-dom';
import { Sidenav, Toggle, Nav, Dropdown, Icon } from 'rsuite';
import Home from '../Home/Home';
import 'rsuite/styles/less/index.less';
import '../../styles/custom-theme.less';
import './Navigation.less';

const NoMatch = ({ location }) => (
    <div>
        <h3>Page not found: {location.pathname}</h3>
    </div>
);

class Navigation extends Component {
    constructor() {
        super();
        this.state = {
            expanded: true,
            activeKey: '1',
        };
        this.handleToggle = this.handleToggle.bind(this);
        this.handleSelect = this.handleSelect.bind(this);
    }
    handleToggle() {
        this.setState({
            expanded: !this.state.expanded
        });
    }
    handleSelect(eventKey) {
        this.setState({
            activeKey: eventKey
        });
    }
    render() {
        const { expanded } = this.state;
        return (
            <Router>
                <div className="sidenav-wrapper">
                    <Sidenav expanded={expanded} appearance="inverse"
                        activeKey={this.state.activeKey}
                        onSelect={this.handleSelect}>
                        <Sidenav.Body>
                            <Toggle onChange={this.handleToggle} checked={expanded} />
                            <hr />
                            <Nav>
                                <Nav.Item componentClass={NavLink} to="/" eventKey="1" activeClassName="rs-nav-item-active" icon={<Icon icon="dashboard" />}>
                                    Dashboard
                                </Nav.Item>
                                <Nav.Item componentClass={NavLink} to="/agents" eventKey="2" activeClassName="rs-nav-item-active" icon={<Icon icon="group" />}>
                                    Agents
                                </Nav.Item>
                                <Dropdown placement="rightTop" eventKey="3" title="Advanced" icon={<Icon icon="magic" />}>
                                    <Dropdown.Item componentClass={NavLink} to="/geo" eventKey="3-1" activeClassName="rs-dropdown-item-active">Geo</Dropdown.Item>
                                    <Dropdown.Item componentClass={NavLink} to="/devices" eventKey="3-2" activeClassName="rs-dropdown-item-active">Devices</Dropdown.Item>
                                </Dropdown>
                                <Dropdown eventKey="4" title="Settings" icon={<Icon icon="gear-circle" />}>
                                    <Dropdown.Item componentClass={NavLink} to="/applications" eventKey="4-1" activeClassName="rs-dropdown-item-active">Applications</Dropdown.Item>
                                    <Dropdown.Item componentClass={NavLink} to="/channels" eventKey="4-2" activeClassName="rs-dropdown-item-active">Channels</Dropdown.Item>
                                </Dropdown>
                            </Nav>
                        </Sidenav.Body>
                    </Sidenav>
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route component={NoMatch} />
                    </Switch>
                </div>
            </Router>
        );
    }
}

export default Navigation;

如果有任何人使用 Rsuite 并制作自定义主题的示例，他们将非常有帮助！谢谢！

Answer 1

如果库的创建者查看了对 react-app-rewired 的更新，您需要安装 customize-cra、less 和 less-loader。 config-overrides.js 应该是：

/* config-overrides.js */
const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@base-color': '#f44336' }
  })
);