17

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?

Konrad Höffner
  • 11,100
  • 16
  • 60
  • 118

1 Answers1

17

In main.js try the below-given code and this should work.

import 'notyf/notyf.min.css'

Syed
  • 15,657
  • 13
  • 120
  • 154