I have a TypeScript web application where I need to include CSS files from NPM dependencies in index.html. Here is an example of how it is done:
<link rel="stylesheet" type="text/css" href="./node_modules/notyf/notyf.min.css" />
When I added Vite to my project, everything worked fine in development mode (vite) since the content was served from the development folder with the node_modules path. However, issues arose when switching to production mode (vite build) or preview mode (vite preview) as the node_modules folder was not included in the output.
Previously, I would simply run npm install on the web server to ensure all dependencies are available in the node_modules folder. Unfortunately, this method doesn't work with an application bundled by Vite.
I tried referring to the Vite documentation at https://vitejs.dev/guide/features.html#css, but most examples were focused on frameworks like PostCSS, React, Vue, tailwind, SASS, etc., which I don't use in my project.
How can I configure Vite to include CSS files from NPM dependencies in a simple TypeScript application that uses ES6 modules without any frameworks?
The manual mentioned something about importing, but I'm unsure of how and where to import the CSS - whether it should be in the index.html or within the modules themselves.