0

I'm just starting out developing with Gatsby (or doing frontend in general) and I wanted to add a Navigation bar to my website using React Suite. However, when importing the corresponding stylesheet in my index.js:

import 'rsuite/lib/styles/index.less';

I get the following message when running gatsby develop:

ERROR #98124  WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'rsuite/lib/styles/index.less' in '/Users/.../src/pages'

If you're trying to use a package make sure that 'rsuite/lib/styles/index.less' is installed. If you're trying to use a local file make sure that the path is correct.

File: src/pages/index.js:14:0

failed Building development bundle - 7.237s
ERROR in ./src/pages/index.js 14:0-38
Module not found: Error: Can't resolve 'rsuite/lib/styles/index.less' in '/Users/.../src/pages'
@ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 31:11-33:5
@ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

webpack compiled with 1 error

I tried so many things already: installing and reinstalling rsuite, installing and reinstalling gatsby-plugin-less and less, clearing the cache, trying all kinds of configurations in gatsby-config.js, but I'm out of options really.

Meanwhile, installing react-bootstrap and importing the stylesheet similarly through

import "bootstrap/dist/css/bootstrap.min.css";

does not produce the error and the stylesheet gets applied.

Would greatly appreciate your help!

mabergerx
  • 1,216
  • 7
  • 19

2 Answers2

0

I think you should be using:

import '~rsuite/lib/styles/index.less';

Notice the ~, as it is inferred from the docs.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • Unfortunately, the same result: Can't resolve '~rsuite/lib/styles/index.less' in '/Users/.../src/pages' If you're trying to use a package make sure that '~rsuite/lib/styles/index.less' is installed. If you're trying to use a local file make sure that the path is correct. – mabergerx Mar 14 '21 at 13:41
  • What about `rsuite/dist/styles/rsuite-default.css`? – Ferran Buireu Mar 14 '21 at 13:46
  • Just to be sure... Have you run `yarn add rsuite` (or `npm i rsuite --save`) and `gatsby clean` before? – Ferran Buireu Mar 14 '21 at 17:31
  • Yeah, did that! What's funny is also that I can in fact do `import { Button } from "rsuite";` which produces an unstyled button with no errors, but the stylesheet refuses to load – mabergerx Mar 15 '21 at 06:45
  • That's odd. Maybe you find this resources useful: https://dev.to/jacobknaack/building-and-designing-a-portfolio-site-using-gatsby-js-and-cosmic-js-2de7, https://gitter.im/rsuite/rsuite?at=5d9c3fce045925467213b73d and https://rsuitejs.com/guide/use-next-app/ (approach using next but maybe it can be applied to Gatsbby) – Ferran Buireu Mar 15 '21 at 07:04
0

You can try this:

import "rsuite/src/styles/themes/default/index.less"

https://github.com/rsuite/rsuite/blob/next/examples/with-gatsby/src/pages/index.js#L4

superman66
  • 46
  • 4