webpackanimate.csswebpack-3

How to load animate.css with Webpack 3?

I'm trying to load animate.css to my app using following dependencies:

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

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

I'd like to achieve that I'll be able to configure what animations will load using animate-css-web-pack.

Here's a list of all my dependencies in the project

"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"
},

Relevant part of my webpack.config.js

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

However animate.css won't load… What am I doing wrong?

Solution

  • Update:

    You don't need the animate-css-webpack-loader for this.

    enter image description here

    Loading only a subset of animation effects manually just do the following in your main.css:

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

    Now you have imported the _base.css which is the base for all other effects. As you can see in the example above, I have only imported the bounce animation. And then you can pull-in/remove effects as you wish, without having a separate config.