Using the newest kotlin.js plugin for gradle (like...

# javascript

[Adam Szadkowski]

Using the newest kotlin.js plugin for gradle (like it is described in https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/01_Introduction ) - has anyone tried to include there some css dependency? For example bootstrap or something else? When I try to load it as a regular module:

@JsModule("typeface-roboto")
@JsNonModule
external val roboto: dynamic

I am getting an error that webpack is unable to load css:

Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <https://webpack.js.org/concepts#loaders>

But still - looking at DSL for

kotlin.target.browser { }

I was not able to find anything which would allow to add new loader.
Is there any solution to this?

[Robert Jaros]

create webpack.config.d/css.js file with:

config.module.rules.push({ test: /\.css$/, loader: "style-loader!css-loader" });

[Robert Jaros]

and add npm dependency on css-loader if it's not already there

[Adam Szadkowski]

Thanks for that! I was able to successfully add bootstrap to build. Unfortunately I still cannot use classes from bootstrap when designing my components. I tried to "force" loading of bootstrap module like this:

@JsModule("bootstrap")
@JsNonModule
external val bootstrapModule: dynamic

An in Main.kt file:

fun main() {
    console.log(bootstrapModule.default)

but it gives "undefined" as a return and log is empty. Any advice here?

[Robert Jaros]

require("bootstrap/dist/css/bootstrap.min.css")
require("bootstrap/dist/js/bootstrap.bundle.min.js")

[Robert Jaros]

define require as external function:

external fun require(name: String): dynamic

[Sebastian Aigner]

@Adam Szadkowski & Co.: if you’d like to avoid the webpack.config.d files in the near future (just like I do), consider adding your vote to https://youtrack.jetbrains.com/issue/KT-32721 “support `useCssLoader()`“.

[Adam Szadkowski]

@Sebastian Aigner sure thing. I have tried to use it with scss actually. Maybe it would be possible to make it easier also.