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

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

我不清楚应该如何将

css

添加到项目中。说明了如何启用

css

webpack支持，但实际上没有说明如何将

css

文件添加到项目中（即如何使用该文件）

例如，在一个普通项目中，您只需将其导入一个javascript文件。既然我是用Kotlin写的，我现在该怎么做呢？

你们可以使用这个库。

---

它简单且多平台。

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

从现有包导入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

，如中所述。以这种方式导入的CSS将由Webpack处理

将您自己的CSS合并到网页包构建中 现在这似乎有点棘手。默认情况下，KotlinJS插件不会将任何资源复制到网页包的构建目录（

build/js/packages/

），我也没有找到任何明显的配置选项。要解决此问题，您必须告诉Webpack在哪里可以找到您的样式：

在项目的根目录中创建

webpack.conf.d

目录，并放入一些JS文件，其中包含：

config.resolve.modules.push（“”）

KotlinJS插件将获取此配置，并将其合并到生成的
build/js/packages//webpack.config.js
中。使用此配置，您只需
require（）
project的样式，如上面的示例所示。这是在书中提到的

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

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

事实上确实如此。@emix您能在注释中使用更详细的内容吗？文档准确地解释了如何使用CSS:。您是否彻底了解了它？更新的链接：一个
csv
库应该如何帮助
css
？