Angular 17+中@import引入animate.css失败问题求助

先确认依赖完整性 #

• 删除项目根目录下的 node_modules 文件夹和 package-lock.json（或 yarn.lock）文件，重新执行 npm install 或 yarn install，确保 animate.css 的文件完整安装到位。有时候依赖安装过程中会出现文件缺失的情况。

SCSS 正确引入写法 #

Angular 17+ 基于 esbuild 构建，不再支持 ~ 前缀的路径引用，直接通过包名引入即可：

@import 'animate.css';

animate.css 的包已经配置了主入口文件，无需指定具体的 .min.css 文件名。

angular.json 配置项调整 #

如果通过 angular.json 的 styles 数组引入，路径要基于项目根目录填写：

"styles": [
  "src/styles.scss",
  "node_modules/animate.css/animate.min.css"
]

修改配置后必须重启 ng serve 才能生效，否则新配置不会被加载。

CDN 引入备选方案 #

本地引入如果一直有问题，可以直接在 index.html 的 <head> 中添加 CDN 链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

这种方式绕开本地依赖，直接加载线上资源，适合快速验证功能。

排查构建配置限制 #

如果项目自定义了 esbuild 构建配置，检查是否有规则限制了 node_modules 目录的文件解析，必要时为 animate.css 添加路径解析规则。

内容的提问来源于stack exchange，提问作者SoXCodinJava