I have a typescript web application that includes CSS files from its NPM dependencies in index.html like this:
<link rel="stylesheet" type="text/css" href="./node_modules/notyf/notyf.min.css" />
After I added vite to my project, this works in development mode (vite
), because it serves the content from my development folder where the path to node_modules exists. However this breaks in production (vite build
) or preview mode (vite preview
) where it is served in another folder and the node_modules folder doesn't get included in the output.
My old workflow was to just npm install
on the web server so it had all it's dependencies in the node_modules folder, but this does not work with an application bundled by Vite.
I consulted the manual including https://vitejs.dev/guide/features.html#css but all the examples in the manual concern people using frameworks and libraries like PostCSS, React, Vue, tailwind, SASS and so on. However I don't use any of those technologies.
How can I get Vite to include CSS files from NPM dependencies in just a simple typescript application consisting of ES6 modules with no frameworks whatsoever?
The manual says something about importing but I don't understand, how and where exactly to import the CSS, in the index.html or in the modules?