3

So I did 

npm install animate.css --save

Which installed it successfully, I can see it in my node_modules I want to be able to use animate.css in my elixir-phoenix-react project.

I am just unsure where to import/require it and what the path would even be.

I tried to @import "animate.css"; from my app.scss file but that did not work

I also tried to import "animate.css/animate.min.css"; in my app.js file that also did not work.

My question is where do I import/require animate.css so that it works? I want to use it in my react components to add some animation.

isignisign
  • 541
  • 2
  • 4
  • 13

2 Answers2

13

After I installed animate.css in the way below

npm install animate.css --save

I simple had to import the css file like this from my node_modules:

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

Cheers

dice89
  • 459
  • 5
  • 10
0

So, you can see it in your node_modules folder. Now, you can use @import in your css file, or just <link> in your head but using the entire path where your animate.css is.

It should be something like node_modules/animate/animate.css

If you want to use it in production, just move the css file into your styles folder.

Anfuca
  • 1,329
  • 1
  • 14
  • 27
  • Is there no way to avoid moving the `animate.css` file into the `/assests/css` folder? Is there no way brunch for brunch to automate something for me? – isignisign Mar 25 '18 at 22:56
  • @isignisign try ```import { bounceIn } from 'animate.css'``` Original post: https://stackoverflow.com/a/43064064/5544999 – hoohoo-b Feb 13 '20 at 06:24