How to use custom CSS file with swagger-ui-express in Node JS

Question

In our index.js file:

const swaggerUi = require('swagger-ui-express');
...
router.use('/api-docs', swaggerUi.serve);
router.get('/api-docs', swaggerUi.setup(swaggerDocument, { customCssUrl: '/docs.css' }));

In the same top-level directory as our index.js file is our docs.css file

h2 {
    color: darkred;
}

And the error we are getting:

CBB Analytics API is an h2 element, clearly not darkred, clearly the doc is not applying the styles because of the error message in the console. How can we troubleshoot this issue?

Answer 1

Seems like I found a solution pretty quick to this.

// serve static files
app.use(express.static(__dirname));
app.use('*.css', (req, res, next) => {
    res.set('Content-Type', 'text/css');
    next();
});

Needed to make sure that the server was sending the correct MIME type for the CSS file. In this case, we needed to set the MIME type to "text/css" for the "docs.css" file.