How can I link to a Kotlin dependency in HTML? For...

# javascript

[Mark Vogel]

How can I link to a Kotlin dependency in HTML? For example, I'd like to convert this:

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css>">
<link rel="stylesheet" href="path/to/bootstrap/dependency/dist/css/bootstrap.min.css"> <!-- to something like this -->

I just can't seem to figure out the correct path to point to the Gradle/NPM dependency; hopefully it's possible haha

Appreciate the help!

[hfhbd]

Just use implementation(npm("bootstrap", "4.6.2")) and include it in your JS files https://kotlinlang.slack.com/archives/C0B8L3U69/p1670084969360959?thread_ts=1669998572.223809&cid=C0B8L3U69

[Mark Vogel]

I see! Thank you for the reference. Unfortunately, this doesn't seem to work, however, it could be because of the forced @JsNonModule?

I tried several paths including bootstrap/dist/css/bootstrap.css as well:

@JsNonModule
@JsModule("bootstrap")
internal external val needsJS: dynamic

@JsNonModule
@JsModule("bootstrap/scss/bootstrap.scss")
internal external val Style: dynamic

fun main() {
    needsJS
    Style
    val container = document.getElementById("root") ?: error("Couldn't find container!")
    val root = createRoot(container)
    root.render(App.create())
}

but I'm getting this error on the browser or it doesn't work:

[hfhbd]

Nope, I use the scss file. If you also want to use the scss file, you need to include the scss webpack loader.

[hfhbd]

If you use Kotlin 1.7.20 use this config:

browser {
  commonWebpackConfig {
    scssSupport {
      enabled = true
    }
  }
}

[Mark Vogel]

Oh awesome! I appreciate that