csscreate-react-apprescript

ReScript React how to import CSS files?

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?

Solution

  • 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