如何将 css 添加到 Kotlin JS 项目？

Question

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

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

例如，在普通项目中，您只需将其导入到javascript 文件中即可。由于我是用Kotlin写的，现在怎么写呢？

Answer 1

您可以使用 kotlin-csv 库。它简单且多平台。

Answer 2

目前的文档对此不是很准确。其实有两种情况：

从现有包中导入 CSS

您可以使用 require() 函数非常轻松地从其他节点模块导入 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，就像 documentation 中描述的那样。 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() 项目的样式。 documentation.

中提到了它

或者，您可以调整 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")
}

如何将 css 添加到 Kotlin JS 项目？

How do you add css to a Kotlin JS project?

gradle

kotlin

kotlin-js

从现有包中导入 CSS

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