如何将 Zurb Foundation 实施到 Rails 7？

Question

我目前正在将 Rails 应用程序升级到 7。我只是测试了一段时间，然后我在 上遇到了问题基础导轨。我安装了它并遵循了除

将 Foundation 添加到您的 JS

似乎 Rails 7 的指令尚未更新。

因此，CSS 似乎工作正常，但是当尝试实现需要 javascript 的功能时，例如 显示，它将无法正常工作。

知道如何正确实施 Foundation to Rails 7 吗？

Answer 1

它死了，吉姆。

与几乎所有“宝石化资产”一样，foundation-rails gem 是为旧的 Sprockets 资产管道制作的，这是 Rails 5 中的默认设置，并且在现代版本的 Rails 中没有维护或相关。

在 Sprockets 最初引入时，将第三方 JavaScript 或 CSS 包包装在 Ruby gems 中的整个想法被认为是可接受的解决方案，但由于它依赖于维护人员更新 gems 只是为了推送新版本的前端包，所以它并没有过时。

Sprockets 本身的开发也已停止，甚至可能无法编译 Foundation 的现代版本（如果它使用较新的功能，例如仅在 Dart-Sass 中可用的模块系统）。

Rails 6 用基于 Node.js 的短命 Webpacker 取代了 Spockets。 Rails 6 还默认使用 Yarn 从 NPM 安装前端包。

Rails 7 采用了一种非常不同的方法：

因此，在 Rails 7 中，我们同时提供了一种出色的默认方法，以避免处理整个节点/npm/捆绑设置，并提供完全支持的替代路线，涵盖所有这些内容。但我们将以与以前不同的方式来做这件事。

Webpacker 诞生于大约五年前，其使命是让那些不一定有兴趣成为 JavaScript 专家的 Rails 开发人员能够轻松使用 JavaScript 捆绑管道。当时 ES6 需要转译才能在浏览器中广泛使用，而 npm 需要访问 Node 的包生态系统，因此确实没有办法解决这个问题。我们要么接受这个现实，要么将 Rails 仅仅作为此类应用程序的 API。我们选择了拥抱。

但如今，为 Webpacker 所做的权衡开始变得不那么有意义了。它有点卡在两条更清晰的道路之间的泥泞中间。有一种完全放弃捆绑管道的新路径，它更容易设置，依赖性更少，并且 Ruby 和 JavaScript 之间的分工也更少。然后是 all-in 路径，我们根本不尝试隐藏或包装 JavaScript 复杂性。我们只是提供一个桥梁，通过该桥梁可以在 Rails 应用程序中使用生成的 JavaScript，但将其留给 JavaScript 生态系统来提供所有答案。

-

Rails 7 并未提供有关如何管理前端包的单一答案。

相反，它只是具有连接各种系统的管道，您需要找到适合您要求的系统，例如通过 import-maps 链接到 CDN，jsbundling-rails 或（不寒而栗）下载基础并通过 Scout 之类的东西编译它。

就开发人员的便利性而言，这与 Rails 5 天“刚刚工作”（某种程度上）相比是一个巨大的倒退，但这种方法不再站得住脚。

Answer 2

我找到了一种让它工作的方法

我没有找到的是在 scss 中通过 importmap 添加基础样式表的正确方法。我只是将它们全部粘贴到资产中并炸毁了我的存储库。但目前还有效。

jQuery

执行 ./bin/importmap pin jquery --download 查看其他选项

添加到 application.js

import jquery from 'jquery'
window.$ = jquery

样式表

1. 下载在这里手动
2. 创建文件夹app/assets/stylesheets/foundation
3. 将文件夹_vendor和scss拖到新文件夹中
4. 添加@import "./foundation/scss/foundation"; 和 @include Foundation-everything(); 到 application.scss
5. 我删除了 * = require_tree . 和*= require_self

Javascript

1. 执行 ./bin/importmap pin Foundation-sites --download

然后添加到 application.js

import 'foundation-sites'

// initialize the page
$(document).on('turbo:render', function() {
    onPageLoad();
});
$(document).ready(function () {
    onPageLoad();
});
function onPageLoad() {
    // init foundation
    $(document).foundation();
}

Answer 3

我走了另一条路

我喜欢粉底，我找到了Vite。
太棒了，它可以与新的 Turbo 配合使用。
最棒的是Vite HMR。

关于如何建立基金会和所有员工，我写了一篇教程
设置 Vite、Svelte ，惯性，刺激，Bootstrap /基础