如何将CSS添加到Kotlin JS项目中？

Question

我使用IntelliJ的向导创建了一个新的Kotlin/JS Gradle项目。

我不清楚该如何将css添加到项目中。 文档解释了如何启用css webpack支持，但并未说明如何将css文件添加到您的项目中（即如何使用该文件）。

例如，在普通项目中，您只需在JavaScript文件中导入它。由于我正在使用Kotlin编写代码，那么现在应该如何做呢？

- vbyzjnlehi

---

确实如此。 - Mike Doe

文档详细解释了如何使用CSS：https://kotlinlang.org/docs/reference/js-project-setup.html#configuring-css。你是否彻底遵循了它？ - Mike Doe

更新链接：https://kotlinlang.org/docs/js-project-setup.html#css - dazza5000

Answer 1

目前的文档对此并不是很精确。实际上有两种情况：

从现有包中导入CSS

您可以使用require()函数轻松地从其他Node模块导入CSS文件:

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"}
    }
}

为了使其正常工作，您需要在Gradle构建中指定cssSupport.enabled = true，就像文档中描述的那样。以这种方式导入的CSS将由Webpack处理。

将自己的CSS合并到Webpack构建中

目前似乎有点棘手。 KotlinJS插件默认不会将任何资源复制到Webpack的构建目录（build/js/packages/<project_name>），我没有找到任何明显的配置选项。要解决此问题，您必须告诉Webpack它可以在哪里找到您的样式：

在项目的根目录中创建webpack.conf.d目录，并放入包含以下内容的某个JS文件：

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

这个配置将被KotlinJS插件捕获，并合并到生成的build/js/packages/<project_name>/webpack.config.js中。有了这个配置，你可以像上面的例子一样使用require()项目的样式。在文档中也有提到它。

或者，您可以调整Gradle构建，使其将样式表复制到Webpack的构建目录中：

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")
}

- pnzr

---

你可以使用 into("${rootProject.buildDir}/js/packages/${rootProject.name}-${project.name}") 来避免设置 moduleName。 - Jordi

在我的系统中，使用 Kotlin Multiplatform，你放置在 jsMain/resources 中的所有内容都会自动复制到 build/js/packages/<project_name>/kotlin。 - Jordi

Answer 2

将CSS文件简单地放入main/resources中，并在index.html中引用它，这对于browserDevelopmentRun和提供生产构建的静态服务都有效。CSS文件出现在build/distributions中。

我的构建：

kotlin("js") version "1.7.20"

index.html

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

index.css与index.html在同一资源文件夹中。

显然，这对于图像和其他任何东西也适用。

- F. P. Freely