How to import CSS in Jotlin/JS?

JavaScript
1

Hi,

I’m trying to use the rmwc library in a Kotlin/JS project and I’m having issues rendering the proper styles for the components because I can’t find the Kotlin equivalent of this JS code: import "@material/button/dist/mdc.button.css";

I assumed that by just importing the rmwc npm package it’d include the CSS automatically but that doesn’t seem to be the case :confused:.

The only way I found to do this is to add <link href="https://unpkg.com/@material/button@4.0.0/dist/mdc.button.css" rel="stylesheet"> to the index.html but I was wondering if there is a way to do this directly in Kotlin?

Can anyone give me a hand on this?

1 Like
2

Hi,

I am doing that with other JS libraries in my project by just adding to my main() function (it can also be placed somewhere else):

import kotlinext.js.require

fun main()
    require("@blueprintjs/core/lib/css/blueprint.css")
    ...
2 Likes
3

Thanks for the suggestion @supertote, I tried that but it doesn’t seem to work on my side, I get the following error:

Uncaught Error: Module parse failed: Unexpected token (8:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Did you add some other npm dependency that helps load CSS files?

4

I think that you need something like style-loader - npm for that. Probably you should track https://youtrack.jetbrains.com/issue/KT-32721.

1 Like
5

Thanks for the info @darksnake, I’ll try that later on as I have a deadline for this and adding it to the index.html works so I’ll keep it like that for now.