How do you add css to a Kotlin JS project?

Question

I created a new Kotlin/JS Gradle project using the wizard in IntelliJ.

I'm unclear how I'm supposed to add css to the project. The documentation explains how to enable css webpack support, but it doesn't actually say how to add the css file into your project (i.e., how to use the file).

For example, in a normal project, you would just import it in a javascript file. Since I am writing in Kotlin, how do I do it now?

Calderon

Actually it does. – Abscission

The documentation explains exactly how to use the CSS: kotlinlang.org/docs/reference/… . Did you follow it thoroughly? – Abscission

Updated link: kotlinlang.org/docs/js-project-setup.html#css – Livestock

Answer 1

The current documentation is not very precise about this. There are actually two cases:

Importing CSS from existing packages

You can pretty easily import CSS files from other Node-modules using the require() function:

import kotlinext.js.require
import kotlinx.browser.document
import react.dom.h1
import react.dom.render

fun main() {
    require("bootstrap/dist/css/bootstrap.css")
    render(document.getElementById("root")) {
        h1 { +"Hello"}
    }
}

For this to work, you need to specify cssSupport.enabled = true in your Gradle build, just like described in the documentation. CSS imported this way will be processed by Webpack.

Incorporating your own CSS into the Webpack build

This seems to be a bit tricky right now. The KotlinJS plugin doesn't copy any resources to the Webpack's build directory (build/js/packages/<project_name>) by default and I didn't find any obvious configuration option for this. To solve it, you have to tell Webpack where it can find your styles:

Create webpack.conf.d directory in project's root and put inside some JS file containing:

config.resolve.modules.push("<your_stylesheet_dir>");

This config will be picked up by the KotlinJS plugin and merged into the generated build/js/packages/<project_name>/webpack.config.js. With this configuration you can just require() project's styles like in the example above. It is kind of mentioned in the documentation.

Alternatively you can tweak the Gradle build, so it copies the stylesheets into the Webpack's build dir:

task("copyStylesheets", Copy::class) {
    from(kotlin.sourceSets["main"].resources) {
        include("styles/**")
    }
    into("${rootProject.buildDir}/js/packages/${kotlin.js().moduleName}")
    // kotlin { js { moduleName = "xyz" }} has to be set for this to work 
}
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinJsDce::class) {
    dependsOn("copyStylesheets")
}

Gomez

You can use into("${rootProject.buildDir}/js/packages/${rootProject.name}-${project.name}") to avoid setting moduleName – Cusco

In my system, using kotlin multiplatform, everything you place inside jsMain/resources is automatically copied to build/js/packages/<project_name>/kotlin – Cusco

Answer 2

Simply sticking a CSS file into main/resources and referencing it in index.html worked for both browserDevelopmentRun and serving the production build, statically. The CSS file appears in build/distributions.

My build:

kotlin("js") version "1.7.20"

index.html

<link rel="stylesheet" href="index.css">

index.css is in the same resource folder as index.html.

This also works for images anything else, apparently.

Wendel