如何将Materialize添加到rails 7

Question

我尝试了很多方法将 Materialise CSS 添加到 Rails 7 中。我需要一些帮助才能将 Materialise 添加到 Rails 7 。我尝试使用

--css=materialize

Answer 1

如果你想使用 Materialize JS 功能，如下拉菜单、侧导航等。这是对我有用的过程。

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

使用原始宝石（按照所有步骤操作）

gem 'materialize-sass'

使用我的分叉版本的 gem （按照第三步）

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

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

第 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"

第3步。在你的

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++) {

Answer 2

最简单的方法是使用

gem

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

  $ bundle install

将

app/assets/stylesheets/application.css

更改为

app/assets/stylesheets/application.scss

  @import "materialize";

//= require materialize

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

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

Answer 3

0
投票

这对我有用！在js文件中进行更改