如何使用 Webpack 3 加载 animate.css？答案

【问题标题】：How to load animate.css with Webpack 3?如何使用 Webpack 3 加载 animate.css？
【发布时间】：2018-08-10 11:05:21
【问题描述】：

我正在尝试使用以下依赖项将 animate.css 加载到我的应用中：

https://github.com/daneden/animate.css

https://github.com/andreimc/animate-css-webpack

我希望能够使用 animate-css-web-pack 配置将加载的动画。

这是我在项目中所有依赖项的列表

"dependencies": {
  "animate-css-webpack": "^3.5.6",
  "animate.css": "^3.6.1"
},
"devDependencies": {
  "@babel/core": "^7.0.0-beta.38",
  "@babel/preset-env": "^7.0.0-beta.38",
  "babel-loader": "^8.0.0-beta.0",
  "css-loader": "^0.28.9",
  "extract-text-webpack-plugin": "^3.0.2",
  "file-loader": "^1.1.6",
  "postcss": "^6.0.16",
  "postcss-loader": "^2.0.10",
  "stylus": "^0.54.5",
  "stylus-loader": "^3.0.1",
  "uglifyjs-webpack-plugin": "^1.1.6",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.11.1"
},

我的 webpack.config.js 的相关部分

entry: {
  'main': [
    'animate-css-webpack!./src/animate-css.config.js',
    './src/app.js',
  ]
},

但是 animate.css 无法加载……我做错了什么？

【问题讨论】：

标签： webpack animate.css webpack-3

【解决方案1】：

更新：

你不需要animate-css-webpack-loader。

仅手动加载一部分动画效果只需在您的 main.css 中执行以下操作：

@import "~animate.css/source/_base.css";
@import "~animate.css/source/attention_seekers/bounce.css";
@import ....

现在您已经导入了_base.css，它是所有其他效果的基础。正如你在上面的例子中看到的，我只导入了bounce 动画。然后您可以根据需要拉入/移除效果，而无需单独的配置。

【讨论】：

您好，感谢您的建议。我知道这种可能性。也许我的问题措辞不正确。我真正想要的是有一个 webpack 加载器，所以我可以使用一个配置文件，这将使我能够打开和关闭我想在我的项目中使用的动画。例如，在开发期间，我可能想要包含所有动画，这样我就可以试用它们，看看它们如何改善用户体验。一旦我准备好进行生产，我会简单地关闭那些我不需要的并编译。这就是使用 animate-css-webpack 的优势所在。
我已经更新了我的答案。 animate-css-webpack 加载器暂时没有更新。我其实不知道为什么要使用它，检查更新。
太棒了！谢谢。
请参阅更新 2 了解配置使用情况。我在这里使用了webpack-modernizr-loader。
别担心，这发生在我们所有人身上。感谢您的帮助。

【解决方案2】：

您可以在 JS 或 CSS 端仅使用一个 import 语句导入 animate.css：

萨斯

@import "~animate.css/source/animate.css";

JavaSript/TypeScript

import "animate.css/source/animate.css";

从source 文件夹中导入 animate.css 是唯一需要导入的文件，因为它会导入所有其他文件（_base.css、_vars.css 和所有效果）：

// source node_modules/animate.css/source/animate.css
@import '_vars.css';
@import '_base.css';

/* Attention seekers  */
@import 'attention_seekers/bounce.css';
@import 'attention_seekers/flash.css';
@import 'attention_seekers/pulse.css';
...

【讨论】：

@import "~animate.css/source/animate.css"; 没有工作。 @import "~animate.css/animate.css";做了。

【解决方案3】：

@import "~animate.css/source/_base.css";

导入基础 CSS。

【讨论】：