How to fix the path of external css in public folder in Express?

Question

Please help me to fix the path to load the external CSS files. I have tried many times, but it does not work out. Here is my category structure:

in the header.ejs, I include the path:

<link rel="stylesheet" type="text/css" href="/style.css" />

I have tried many times, but it does not work

// app.use(express.static(path.join(__dirname + '../../src/web/public/')));
// app.use('*/css',express.static('public/'));
// app.use("/static", express.static(path.resolve(__dirname + "/public/css")));

I keep getting this error:

Refused to apply style from 'localhost:3000/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Answer 1

Assuming the express.static is called within your app.js file (residing in the dist folder) and the public folder is included in the dist folder the following should work:

in your app.ts:

app.use(express.static('public'))

in your html/ejs:

<link rel="stylesheet" type="text/css" href="css/style.css" />

If you intend to keep the public-folder in the src-dir and not include it in your dist-package, you need to adjust the path in your app.ts file:

app.use(express.static(path.join(__dirname, '../../src/web/public')));