如何使 animate.css 在 Rails 中工作？由于 animate-rails 不适用于 heroku

Posted 2023-02-15

【中文标题】如何使 animate.css 在 Rails 中工作？由于 animate-rails 不适用于 heroku

【英文标题】：How to make animate.css work in rails? As animate-rails is not working on heroku

【发布时间】：2021-11-21 16:22:21

【问题描述】：

animate-rails 不在 heroku 上工作，而是在本地工作。不过，Coffeescript 正在开发 Heroku。

rails 版本：Rails 6.1.4.1 ruby 版本：ruby 3.0.2p107（2021-07-07 修订版 0db68f0233）[arm64-darwin20]

以下是各个文件中的代码：

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 文件 -> .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

【参考方案1】：

由于您使用的是 SCSS，您可以尝试修改您的 application.css.scss 文件吗：

@import 'animate';

【讨论】：

尝试在appliclation.css.scss 中使用@import 'animate';，没有运气

【参考方案2】：

您的application.scss 文件名似乎有问题，它不应该是.css.scss。扩展名只能是 .scss。

此外，如果您使用 webpacker（Rails 6 中的标准配置），您可以尝试在生产环境中运行 ./bin/webpack。

【讨论】：

尝试将扩展名更改为仅.scss，然后运行./bin/webpack，它仍然无法正常工作：/

您是否预编译了您的资产？ RAILS_ENV=生产轨道资产：预编译

是的，也试过了，还是不行