Swagger: Add a way to add custom css to the generated swagger html

Created on 16 Aug 2018 · 8Comments · Source: nestjs/swagger

I'm submitting a...


[ ] Regression 
[ ] Bug report
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead post your question on Stack Overflow.

Current behavior

There's no option to add custom styles to the generated swagger html

Expected behavior

have an option for the DocumentBuilder to setCustomCss that recieves a path to a css file (or scss file?)

Environment


Nest version: 5.0.0


For Tooling issues:
- Node version: 7.7.3
- Platform:  Mac

Source

Thatkookooguy

Most helpful comment

The SwaggerModule accepts options argument as a 4th argument:

public static setup(
    path: string,
    app: INestApplication,
    document: SwaggerDocument,
    options?: SwaggerCustomOptions
) {...}

These options are passed down to the underlying swagger-ui-express package. Here is a SwaggerCustomOptions interface:

export interface SwaggerCustomOptions {
  explorer?: boolean;
  swaggerOptions?: any;
  customCss?: string;
  customJs?: string;
  customfavIcon?: string;
  swaggerUrl?: string;
  customSiteTitle?: string;
}

as you see, there is a customCss property available already.

kamilmysliwiec on 16 Aug 2018

👍2 🎉1

All 8 comments

I don't mind adding this myself. I just need a little guidance to where the actual swagger express module is called and passed the generated options

Thatkookooguy on 16 Aug 2018

The SwaggerModule accepts options argument as a 4th argument:

public static setup(
    path: string,
    app: INestApplication,
    document: SwaggerDocument,
    options?: SwaggerCustomOptions
) {...}

These options are passed down to the underlying swagger-ui-express package. Here is a SwaggerCustomOptions interface:

export interface SwaggerCustomOptions {
  explorer?: boolean;
  swaggerOptions?: any;
  customCss?: string;
  customJs?: string;
  customfavIcon?: string;
  swaggerUrl?: string;
  customSiteTitle?: string;
}

as you see, there is a customCss property available already.

kamilmysliwiec on 16 Aug 2018

👍2 🎉1

@kamilmysliwiec great! thanks for the info! :-) didn't find that in the docs

Thatkookooguy on 17 Aug 2018

Maybe it is a good point to add it into the documentation :) feel free to create a PR, if you want to

kamilmysliwiec on 17 Aug 2018

👍1

can we pass custom css 'file' in the customCss option