core/com.varabyte.kobweb.gradle.core.util/importCss

importCss

fun STYLE.importCss(url: String, layerName: String? = null)(source)

Adds an @import rule to import a CSS stylesheet, optionally loading it into a specific CSS Cascade layer.

This can be useful when using a third party CSS library whose styles are a bit too aggressive and are interfering with your own styles.

For example, replace a <link> tag with an @import rule:

kobweb.app.index.head.add {
  // Before
  link(href = "/highlight.js/styles/dracula.css", rel = "stylesheet")
  // After
  style {
    importCss("/highlight.js/styles/dracula.css", layerName = "highlightjs")
  }
}

Then, register your new layer in an @InitSilk block:

@InitSilk
fun initSilk(ctx: InitSilkContext) {
  // Layer(s) referenced in build.gradle.kts
  ctx.stylesheet.cssLayers.add("highlightjs", after = SilkLayer.BASE)
}

Parameters

url

The URL of the CSS file to import. This can be an external URL or a path to a local public resource.

layerName

The cascade layer in which to load the stylesheet. For this to have any effect, the layer MUST be registered in an @InitSilk block.