0

We need to customize IBM Verse on prem for our corporate design. The documentation show how to add customized inline css. But that's not maintainable for larger customizations. I want to load css files, that could be generated by sass for keeping development DRY.

I tried the following in the example from the official docs:

[
  {
    "name": "CSS Extension Sample",
    "description": "The sample shows how to customize Verse UI",
    "title": "CSS Extension Sample",
    "extensions": [
      {
        "type": "com.ibm.verse.ext.css",
        "name": "CSS extension sample",
        "payload": {
          "url": "{extensionPath}/samples/test.css"
        }
      }
    ],
    "services": ["Verse"]
  }
]

And I also did some experiments with css import like this:

"payload": {
  "css": "@import url('{extensionPath}/samples/test.css');"
 }

with corresponding include of the file in manifest.json

"web_accessible_resources": ["page.js", "applications.json", "style.css"]

But test.css doesn't get loaded. The code itself works when using inline css: 

"payload": {
  "css": ".ics-scbanner {background-color:green!important;}"
}

How can I load the css file instead of inline css?

Daniel
  • 968
  • 3
  • 13
  • 32
  • @import is an sass command not a css command! – Wimanicesir Jun 26 '19 at 14:20
  • @Wimanicesir No, it's also CSS, see [CSS @import documentation](https://www.w3schools.com/csSref/pr_import_rule.asp). But an `@import` directive [exists in SASS, too.](https://sass-lang.com/documentation/at-rules/import). – Daniel Jun 26 '19 at 14:35

0 Answers0