CODEWITHSUNDEEP
webpackanimate.csswebpack-3
crs1138
crs1138

Reputation: 946

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?

Upvotes: 3

Views: 9772

Answers (3)

David DIVERRES
David DIVERRES

Reputation: 1911

You can import animate.css using only one import statement, on JS or CSS side:

Sass

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

JavaSript/TypeScript

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

Importing animate.css from the source folder is the only one necessary file to import because it import all others files (_base.css, _vars.css and all effects):

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

Upvotes: 2

Prem Kumar
Prem Kumar

Reputation: 61

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

imports the base css.

Upvotes: 0

Legends
Legends

Reputation: 22702

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.

Upvotes: 4

Related Questions