如何将Materialize添加到Rails 7

Question

我尝试了许多方法将Materialize CSS添加到Rails 7中。 我需要一些帮助来将Materialize添加到Rails 7中。 我尝试使用

--css=materialize

- talaat magdy

---

请提供足够的代码，以便他人更好地理解或重现问题。 - Community

你得到答案了吗？我从Materialize的GitHub git克隆了示例Rails 7应用程序，并将尝试将其用作起点。看起来在init.js中有Turbo的规定。 - doer123456789

Answer 1

如果你想使用materialize JS的功能，比如下拉菜单、侧边栏等，这是我使用的过程。

你可以选择两种路径。第一条路涉及使用当前的materialize-sass gem，你需要遵循四个步骤。对于第二条路，你只需要走到第三步，但你将在你的Gemfile中使用我在Github上的gem分支

使用原始的gem (遵循所有步骤)

gem 'materialize-sass'

使用我分支的宝石版本（跟进第三步）

gem "materialize-sass", git: "https://github.com/Joaquinb2000/materialize-sass-rails-7.git"

安装其中一个gem之后，请确保按照Korak答案中的步骤3和4将materialize样式表添加到您的应用程序中。

步骤1。将此行添加到config/initializers/assets.rb文件末尾。

Rails.application.config.assets.precompile += %w( materialize.js )

步骤 2. 在 config/importmap.rb 的所有内容后添加这两行代码。

pin "jquery", to: "https://code.jquery.com/jquery-3.6.3.min.js"
pin "materialize", to: "materialize.js"

第三步。 在你的app/javascript/application.js文件末尾添加以下两行代码：

import "jquery"
import "materialize"

接下来，记得添加相应的代码来激活所需的效果。例如，如果您想要激活下拉菜单，只需在'import "materialize"'之后添加以下行：

$(".dropdown-trigger").dropdown();

步骤 4. 查找您的 gem 的安装路径。在我的情况下，我在 ubuntu wsl 中使用 rbenv，因此您可以在您的主目录"~/.rbenv" 或 "/home/#{your_username}/.rbenv" 找到它。

一旦您找到了 gem 的位置并进入其文件夹，请转到 "assets/javascripts" 并使用您最喜欢的代码编辑器编辑 materialize.js。转到第 1509 行并替换以下行：

p = $jscomp.global;e = e.split(".");for (m = 0; m < e.length - 1; m++) {

使用：

let p = $jscomp.global;e = e.split("."); if(!p) p = new Array();for (m = 0; m < e.length - 1; m++) {

（这个 materialize.js 的修复来自于 https://github.com/Dogfalo/materialize/issues/6557#issuecomment-1253883870，感谢）

- Joaquín Berrios

---

截至Materialize v1.0.0，在第1511行找到它。 - iChido

我一直都在遇到这个错误，即使我按照你建议的修改了materialize.js文件：Uncaught TypeError: Cannot use 'in' operator to search for 'Array' in undefined at $jscomp.polyfill (materialize.js:1512:22) at materialize.js:1515:11有什么建议吗？ - iChido

以上附加评论：我正在开发一个新的Rails 7应用程序。 - iChido

我通过按照这个解决方案上的步骤，找到了如何应用我的修复方法。 - iChido

Answer 2

最简单的方法是使用gem

1. 将以下内容添加到您的Gemfile中

  gem 'materialize-sass'
  gem "sassc-rails"

在终端中运行bundle install以安装新的Gem。

  $ bundle install

将 app/assets/stylesheets/application.css 文件名改为 app/assets/stylesheets/application.scss

在 app/assets/stylesheets/application.scss 中添加此行代码

  @import "materialize";

将这一行添加到app/config/manifest.js中。

//= require materialize

现在你可以在你的应用程序中使用Materialize了

欲了解更多信息，请查看materialize-sass

- Korak

---

尽管CSS可能可以与此配合使用，但Materialize的JS部分不行。难道它也需要jQuery才能工作吗？你在JS控制器中如何处理这个问题？你的答案与Rails 5比Rails 6和Rails 7更相关。这个问题是针对Rails 7的。 - doer123456789

我只需要在视图中使用CSS来进行基本样式设置，所以我并没有真正使用任何JS。这就是为什么我不太确定它在那些情况下会如何工作。 - Korak