如何在生产环境中包含 Vite 中 node_modules 的 CSS？

Question

我有一个 typescript Web 应用程序，其中包含来自其 NPM 依赖项的 CSS 文件，如下所示：

<link rel="stylesheet" type="text/css" href="./node_modules/notyf/notyf.min.css" />

将 vite 添加到我的项目后，它可以在开发模式 ( vite) 下工作，因为它提供来自我的开发文件夹的内容，其中存在 node_modules 的路径。但是，这会在生产 ( vite build) 或预览模式 ( ) 中中断，在生产模式 ( ) 或预览模式 ( vite preview) 中，它会在另一个文件夹中提供，并且 node_modules 文件夹不会包含在输出中。

我的旧工作流程仅npm install在 Web 服务器上，因此它的所有依赖项都在 node_modules 文件夹中，但这不适用于 Vite 捆绑的应用程序。

我查阅了手册，包括https://vitejs.dev/guide/features.html#css但手册中的所有示例都涉及使用 PostCSS、React、Vue、tailwind、SASS 等框架和库的人。但是我没有使用任何这些技术。

如何让 Vite 将来自 NPM 依赖项的 CSS 文件包含在一个简单的打字稿应用程序中，该应用程序由 ES6 模块组成，没有任何框架？

手册说了一些关于导入的内容，但我不明白，如何以及在哪里导入CSS，在index.html中还是在模块中？

Answer 1

尝试main.js下面给出的代码，这应该可以工作。

import 'notyf/notyf.min.css'