title: How to include CSS from node_modules in Vite in production?
body: <p>I have a typescript web application that includes CSS files from its NPM dependencies in index.html like this:</p>
  <pre><code>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./node_modules/notyf/notyf.min.css&quot; /&gt;
  </code></pre>
  <p>After I added vite to my project, this works in development mode (<code>vite</code>), because it serves the content from my development folder where the path to node_modules exists. However this breaks in production (<code>vite build</code>) or preview mode (<code>vite preview</code>) where it is served in another folder and the node_modules folder doesn't get included in the output.</p>
  <p>My old workflow was to just <code>npm install</code> 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.</p>
  <p>I consulted the manual including <a href="https://vitejs.dev/guide/features.html#css" rel="noreferrer">https://vitejs.dev/guide/features.html#css</a> 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.</p>
  <p>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?</p>
  <p>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?</p>