user interface - How to Modify the StrongLoop's LoopBack Explorer CSS

Question

We're using Strongloop's LoopBack for our REST APIs and would like to modify the CSS for the LoopBack Explorer. However, it's not clear which CSS files are being used (LoopBack vs Swagger) and where they're located. I was not able to find specific documentation for this.

Answer 1

You can modify more than just the css. And also, if you generate your Loopback application using slc loopback like I did, you'll find that your server/server.js doesn't look immediately in a way you can configure it like it's shown in the accepted answer.

Instead you can use server/component-config.json to instruct the loopback component explorer to use an alternative directory for static files for the swagger-ui. With the uiDirs configuration below I configured it to go look for static files in the server/explorer directory.

{
  "loopback-component-explorer": {
    "mountPath": "/explorer",
    "uiDirs": "server/explorer",
    "apiInfo": {
      "title": "My API",
      "description": "Description of my API"
    }
  }
}

* When using IISNode uiDirs has to be set to "explorer" otherwise it's "server/explorer" as per @phegde 's comment

In my server directory I created a index.html which is a copy from node_modules/loopback-component-explorer/public/index.html and also I created an images folder with a custom logo.

And finally, If you want to have custom css, copy node_modules/loopback-component-explorer/public/css/loopbackStyles.css into server/explorer/css/loopbackStyles.css