NestJS小技巧05-自定义样式的Swagger大家好我是雪隐，请叫我雪宝，SwaggerUI相信大家肯定不陌生，一般

by 雪隐 from https://juejin.cn/user/1433418895994094
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可联系授权

大家好我是雪隐，请叫我雪宝，SwaggerUI相信大家肯定不陌生，一般是用来给做前端的人看的。但是基本上它的格式是固定的，我们只要添加相应的注解他就能生成固定格式网页。但是有时候如果我们想个性化一点，生成自己风格的SwaggerUI，是可以添加自定义样式的。

怎么自定义样式

一般我们的Swagger可以通过如下方式，SwaggerModule.setup()函数中的第三个参数，是配置项内容。这个配置项里面的customCss和customCssUrl都是可以改变Swagger样式的。

import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';

export const generateDocument = (app) => {
  const options = new DocumentBuilder()
    .setTitle('雪隐')
    .setDescription('博客项目')
    .setVersion('0.0.1')
    .build();

  const document = SwaggerModule.createDocument(app, options);

  SwaggerModule.setup('/api/doc', app, document, {
    // 自定义样式
    customCssUrl: '/css/theme-ouline.css',
  });
};

网上的一些样式库

当然了，有很多现成的Swagger样式库可以直接使用，如swagger-ui-themes. 那么怎么使用呢？

安装样式依赖

# -D 就行了。
pnpm i swagger-ui-themes -D

从node_modules中找到对应的样式文件，选一个自己喜欢的样式，把它复制到根目录的public/css文件夹下。

配置NestJS静态依赖，在main.ts中加入如下代码，静态文件的位置就是2.的public文件夹。

  app.useStaticAssets({
    root: join(__dirname, '..', 'public'),
    prefix: '/',
  });

在，SwaggerModule.setup()加入样式

  SwaggerModule.setup('/api/doc', app, document, {
    // 自定义样式
    customCssUrl: '/css/theme-ouline.css',
  });

结论

调整并不能提高开发效率，质量等等。只是锦上添花而已。所以有兴趣的小伙伴尝试下就行了。但是不要花费太多时间在这个上面。