title: How to Create a Custom Less Theme with the React Rsuite Library
body: <p>Has anyone used the Rsuite library (<a href="https://rsuitejs.com/en/guide/themes" rel="nofollow noreferrer">https://rsuitejs.com/en/guide/themes</a>). I'm trying to create a custom theme but am having trouble following their instructions. I installed the following dependencies: customize-cra, less, less-loader, react-app-rewire-less, and react-app-rewired. Also, I'm not sure where to Import the default and custom .less files:</p>
  
  <blockquote>
    <p>Import less
    Create a separate .less file as follows, and then introduce this file.</p>
  </blockquote>
  
  <pre><code>@import '~rsuite/styles/less/index.less'; //The default style file.
  @import 'custom-theme.less'; // Style customization.
  </code></pre>
  
  <p>So far, my config.override.js looks like:</p>
  
  <pre><code>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,
      })
  );
  </code></pre>
  
  <p>The fixBabelImports is difficult for me because I keep getting this error when trying to compile:</p>
  
  <blockquote>
    <p>Module not found: Can't resolve 'rsuite/styles/dropdown' in '/Users/kristenbaldwin/mreb-2/src/components/Navigation'</p>
  </blockquote>
  
  <p>Here is my Navigation component:</p>
  
  <pre><code>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 }) =&gt; (
      &lt;div&gt;
          &lt;h3&gt;Page not found: {location.pathname}&lt;/h3&gt;
      &lt;/div&gt;
  );
  
  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 (
              &lt;Router&gt;
                  &lt;div className="sidenav-wrapper"&gt;
                      &lt;Sidenav expanded={expanded} appearance="inverse"
                          activeKey={this.state.activeKey}
                          onSelect={this.handleSelect}&gt;
                          &lt;Sidenav.Body&gt;
                              &lt;Toggle onChange={this.handleToggle} checked={expanded} /&gt;
                              &lt;hr /&gt;
                              &lt;Nav&gt;
                                  &lt;Nav.Item componentClass={NavLink} to="/" eventKey="1" activeClassName="rs-nav-item-active" icon={&lt;Icon icon="dashboard" /&gt;}&gt;
                                      Dashboard
                                  &lt;/Nav.Item&gt;
                                  &lt;Nav.Item componentClass={NavLink} to="/agents" eventKey="2" activeClassName="rs-nav-item-active" icon={&lt;Icon icon="group" /&gt;}&gt;
                                      Agents
                                  &lt;/Nav.Item&gt;
                                  &lt;Dropdown placement="rightTop" eventKey="3" title="Advanced" icon={&lt;Icon icon="magic" /&gt;}&gt;
                                      &lt;Dropdown.Item componentClass={NavLink} to="/geo" eventKey="3-1" activeClassName="rs-dropdown-item-active"&gt;Geo&lt;/Dropdown.Item&gt;
                                      &lt;Dropdown.Item componentClass={NavLink} to="/devices" eventKey="3-2" activeClassName="rs-dropdown-item-active"&gt;Devices&lt;/Dropdown.Item&gt;
                                  &lt;/Dropdown&gt;
                                  &lt;Dropdown eventKey="4" title="Settings" icon={&lt;Icon icon="gear-circle" /&gt;}&gt;
                                      &lt;Dropdown.Item componentClass={NavLink} to="/applications" eventKey="4-1" activeClassName="rs-dropdown-item-active"&gt;Applications&lt;/Dropdown.Item&gt;
                                      &lt;Dropdown.Item componentClass={NavLink} to="/channels" eventKey="4-2" activeClassName="rs-dropdown-item-active"&gt;Channels&lt;/Dropdown.Item&gt;
                                  &lt;/Dropdown&gt;
                              &lt;/Nav&gt;
                          &lt;/Sidenav.Body&gt;
                      &lt;/Sidenav&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path="/" component={Home} /&gt;
                          &lt;Route component={NoMatch} /&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/Router&gt;
          );
      }
  }
  
  export default Navigation;
  </code></pre>
  
  <p>If there are any examples of people using Rsuite and making custom themes, they would be super helpful to see! Thanks!</p>