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

Question

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

Answer 1

<强> 更新

你不需要animate-css-webpack - 加载器。

仅手动加载动画效果的子集，只需在main.css中执行以下操作：

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

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

Answer 2

在JS或CSS端，您只能使用一条import语句来导入apk add libc6-compat ：

无礼

animate.css

JavaSript / TypeScript

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

---

从import "animate.css/source/animate.css"; 文件夹导入animate.css是唯一需要导入的文件，因为它会导入所有其他文件（_base.css，_vars.css和所有效果）：< / p>

source

Answer 3

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

导入基本css。