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

Question

我正在尝试使用以下依赖项将 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 不会加载...我做错了什么？

Answer 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 动画。然后你可以 pull-in/remove 效果随心所欲，无需单独配置。

Answer 2

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

导入基础 css。

Answer 3

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

Sass

@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';
...

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

How to load animate.css with Webpack 3?

webpack

animate.css

webpack-3

Sass

JavaSript/TypeScript