How to add Materialize to rails 7

Question

I tried many things to add Materialize CSS to rails 7 . I need some helps to add Materialize to rails 7 . i tried use

--css=materialize

Answer 1

The easy way will be using gem

1. Add this to your Gemfile

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

2. Run bundle install in Terminal to install new Gems

  $ bundle install

3. change app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss

4. Add this line in app/assets/stylesheets/application.scss

  @import "materialize";

5. add this line in app/config/manifest.js

//= require materialize

Now you can use Materialize in Your App

For more information checkout materialize-sass

Answer 2

If you want to use materialize JS functionalities like dropdown, sidenavs, etc. This is the process that worked for me.

You can choose one of two paths. The first path involves using the current materialize-sass gem and you'll need follow the four steps. For the second path you'll only need to go up to step three but you'll be using my fork on Github of the gem in your Gemfile

Use the original gem (Follow all the steps)

gem 'materialize-sass'

Use my forked version of the gem (Follow up to step three)

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

After installing one of the gems be sure to follow steps 3 and 4 from Korak's answer to add the materialize stylesheets to your app.

Step 1. Add this line at the end of your config/initializers/assets.rb

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

Step 2. Add these two lines after everything in config/importmap.rb

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

Step 3. In your app/javascript/application.js put these two at the end

import "jquery"
import "materialize"

After that, remember to add the correspondent code to activate the effects you want. For example, if you wanted to activate dropdowns you'd add the following line after the 'import "materialize"':

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

Step 4. Find the install path for your gems. In my case I use rbenv in ubuntu wsl, so you'd find it in your home directory "~/.rbenv" or "/home/#{your_username}/.rbenv"

Once you find the location of the gem and you're inside its folder go to "assets/javascripts" and edit materialize.js with the code editor you like best. Go over to line 1509 and replace the following line:

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

With:

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

(This fix for materialize.js comes from courtesy of https://github.com/Dogfalo/materialize/issues/6557#issuecomment-1253883870. Thank you)