gradle 如何将css添加到KotlinJS项目中?

iezvtpos  于 2022-12-13  发布在  Kotlin
关注(0)|答案(2)|浏览(154)

我使用IntelliJ中的向导创建了一个新的Kotlin/JS Gradle项目。
我不清楚应该如何将css添加到项目中。文档解释了如何启用css webpack支持,但实际上并没有说明如何将css文件添加到项目中(即如何使用该文件)。
例如,在一个普通的项目中,你只需要在一个javascript文件中导入它。既然我在用Kotlin写,我现在怎么做呢?

wlp8pajw

wlp8pajw1#

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

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

这似乎有点棘手。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")
}
9rbhqvlz

9rbhqvlz2#

只需将CSS文件粘贴到main/resources中并在index.html中引用它,即可静态地为browserDevelopmentRun和产品构建服务。CSS文件出现在build/distributions中。
我的版本:

kotlin("js") version "1.7.20"

index.html

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

index.cssindex.html位于同一资源文件夹中。
显然,这也适用于其他任何图像

相关问题