How to make animate.css work in rails? As animate-rails is not working on heroku-CodePudding

animate-rails is not working on heroku, but working on local. Coffeescript is working on heroku production though.

rails version: Rails 6.1.4.1 ruby version: ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [arm64-darwin20]

Below is the code in the respective files:

Gemfile gem "animate-rails"

application.css.scss *= require animate

application.js import 'animate.css/animate'

package.json "animate.css": "^4.1.1"

production.rb config.assets.compile = false

html file .nav-item.animate__animated.fadeIn.animate__slower.animate__delay-2s Sample Text

application.html.slim

    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

environment.js

const { environment } = require('@rails/webpacker')
const coffee = require('./loaders/coffee')
const webpack = require('webpack')
environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)
environment.loaders.prepend('coffee', coffee)
module.exports = environment

CodePudding user response：

Since you are using SCSS, can you try modifying your application.css.scss file:

@import 'animate';

CodePudding user response：

There seems to be an issue with your application.scss file name, it shouldn't be .css.scss. The extension should only be .scss.

Also, you can try running ./bin/webpack in your production environment if you are using webpacker (which comes standard in Rails 6).