如何修改StrongLoop的LoopBack Explorer CSS

Question

我们在REST API中使用Strongloop的LoopBack,并希望修改LoopBack Explorer的CSS.但是,目前尚不清楚使用哪些CSS文件(LoopBack vs Swagger)以及它们的位置.我无法为此找到具体的文档.

Answer 1

您可以修改的不仅仅是css.而且,如果你slc loopback像我一样使用我的方式生成Loopback应用程序,你会发现你server/server.js不会立即看到你可以像接受的答案中所示的那样配置它.

相反,您可以使用server/component-config.json指示loopback组件资源管理器为swagger-ui使用静态文件的替代目录.通过uiDirs下面的配置,我将其配置为在server/explorer目录中查找静态文件.

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

*当使用IISNode uiDirs必须设置为"explorer"否则它"server/explorer"是根据@phegde的评论

在我的服务器目录中,我创建了一个index.html,它是一个副本,node_modules/loopback-component-explorer/public/index.html我也创建了一个带有自定义徽标的图像文件夹.

最后,如果你想拥有自定义css,请复制node_modules/loopback-component-explorer/public/css/loopbackStyles.css到server/explorer/css/loopbackStyles.css

Answer 2

您可以通过提供自己的Swagger UI文件版本options.uiDirs.

1. 编辑server/server.js并将此配置选项添加到资源管理器:

   app.use(explorer(app, { uiDirs: path.resolve(__dirname, 'explorer') }));
   

2. 将目录复制node_modules/loopback-explorer/public/css到server/explorer/css

3. 根据需要自定义复制的CSS文件.

您应该在package.json中锁定loopback-explorer的主要版本和次要版本.较新版本的loopback-explorer可能会更改CSS,在这种情况下,您的自定义可能会停止工作.