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")
}
2条答案
按热度按时间wlp8pajw1#
目前的文档对此并不十分精确。实际上有两种情况:
从现有包导入CSS
使用require()函数可以很容易地从其他节点模块导入CSS文件:
要实现这一点,您需要在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的构建目录中:
9rbhqvlz2#
只需将CSS文件粘贴到
main/resources
中并在index.html中引用它,即可静态地为browserDevelopmentRun
和产品构建服务。CSS文件出现在build/distributions
中。我的版本:
index.html
index.css
与index.html
位于同一资源文件夹中。显然,这也适用于其他任何图像