Not able to load CSS from Rescript :(

1

I have been struggling for many days. it’s just too many technologies to learn in a single shot. My code started working at some point of time but now it’s not working again.

I just can’t load CSS … no matter what I do. I tried everything in the documentation. I am trying to load CSS using webpack.

Here is my code https://github.com/abhsrivastava/react-tutorial its a very simple react component with a menu.

Not sure what to do. can you please have a look at it and tell me what’s wrong?

2

You seem to use ES6 as an output format. Did you try importing the css module with a default import?

@module("./Tutorial.module.css") external styles: {..} = "default"

If this doesn’t help, any hints on what errors you get?

1 Like
3

If I change my code to how you have written it … it works. but if I read the documentation then

Global CSS approach of

%%raw(“require(’./Tutorial.css’)”)

and CSS modules approach of

@module external styles: {…} = “./Tutorial.css”

does not work with no changes to anything else.

4

Forgot to say thanks to ryyppy for making my code work. Deeply grateful.

But now my question when can I expect which approach to work? there are 3 approaches

  1. %%raw(“require(’./Tutorial.css’)”)
  2. @module external styles: {…} = “./Tutorial.css”
  3. @module("./Tutorial.module.css") external styles: {…} = “default”

Third one works for my code but the first two don’t

5

It’s important to understand that all Rescript does is change your code to Javascript. This means that Rescript doesn’t have a concept of “importing css”, it just changes it to JS imports

So that means when using one of the above 3 methods, we need to look at what the output is happening and try to match that up with the webpack docs.

  1. %%raw(“require(’./Tutorial.css’)”)

All this does is output exactly what you write

require("./Tutorial.css")
  1. @module external styles: {…} = “./Tutorial.css”

This turns into an import of the module

const styles = require("./Tutorial.css")
  1. @module("./Tutorial.module.css") external styles: {…} = “default”

This does the same thing, except imports the default value (export default )

const styles = require("./Tutorial.css").default

So all you’re looking for from rescript is which one converts it to a format that your bundler (webpack) will understand. It’s important to understand how modules work and the difference between commonjs and es6, below are some links that might give you an idea of what’s happening behind the scenes

3 Likes