1

I am working on porting an existing React App to ReScript React, however I am running into a few issues. Namely I can't for the life of me figure out how to import CSS in ReScript, for example, In React to import Bootstrap all I would have to do is:

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

However there is no corresponding way to do this in ReScript (to my knowledge), I tried doing:

@module("bootstrap/dist/css/bootstrap.min.css")

But it doesn't work. How can I import CSS files in ReScript React?

Rawley Fowler
  • 1,366
  • 7
  • 15
  • Just to clarify, importing css files is not something ReScript, rescript-react, react.js or JavaScript does. It's simply not a concept that is in the scope of what any of these languages and libraries do. – glennsl Sep 15 '22 at 08:49
  • 1
    When you say "React" I suspect you mean "create-react-app", which is an obtuse collection of different tools and libraries that ensures you have no idea what's actually going on and how to sort things out when they go slightly outside the boundaries of the very narrow scope it was designed for. But last time I checked, `create-react-app` used `webpack` as its bundler, and if you use `webpack` without `create-react-app` you likely have to do a little bit of webpack configuration too. – glennsl Sep 15 '22 at 08:50

1 Answers1

2

Use a %%raw expression to import CSS files within your ReScript / React component code:

// in a CommonJS setup
%%raw("require('./styles/main.css')")
    
// or with ES6
%%raw("import './styles/main.css'")

Reference - https://rescript-lang.org/docs/react/latest/styling

glennsl
  • 28,186
  • 12
  • 57
  • 75
pr_veen
  • 55
  • 5