如何解决你如何将 css 添加到 Kotlin JS 项目中? 从现有包导入 CSS将您自己的 CSS 合并到 Webpack 构建中
我使用 IntelliJ 中的向导创建了一个新的 Kotlin/JS Gradle 项目。
我不清楚应该如何将 css
添加到项目中。 documentation 解释了如何启用 css
webpack 支持,但实际上并未说明如何将 css
文件添加到您的项目中(即如何使用该文件)。>
例如,在普通项目中,您只需将其导入到 javascript 文件中。既然我是用 Kotlin 写的,我现在该怎么做?
解决方法
目前的文档对此并不十分精确。其实有两种情况:
从现有包导入 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
,就像 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")
}
,
您可以使用 kotlin-csv 库。 它简单且多平台。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。