Vite生产环境如何引入node_modules中的CSS（无框架TS项目适用）

你可以选择以下两种无需额外框架/工具依赖的方案实现，Vite原生支持相关能力，不需要配置PostCSS、SASS等额外插件：

方案1：入口TS模块内导入（推荐） #

找到你项目的ES模块入口文件（一般为src/main.ts，即index.html中<script type="module">标签引入的TS文件），在文件最顶部添加CSS导入语句即可：

// 在所有其他业务代码前添加该行
import 'notyf/notyf.min.css'

Vite会自动处理该CSS资源：开发模式下实时注入页面，生产构建时将CSS打包到最终产物中，自动处理资源路径。

方案2：保留在index.html中引入的写法 #

如果不想修改TS文件，也可以直接调整index.html中的link标签写法，两种可选写法如下：

写法A：内联模块导入 #

在index.html中添加一段内联ES模块脚本导入CSS：

<script type="module">
  import 'notyf/notyf.min.css'
</script>

写法B：使用Vite支持的npm前缀路径 #

直接修改原有link标签的href属性：

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

内容的提问来源于stack exchange，提问作者Konrad Höffner