(This more a n00b question than an issue) How do I use this with webpacker? <p

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

hello :) i think i found a way to use the java of this gem in a default rail

Rails Webpacker about materialize-sass HOT 3 OPEN

redhoodie commented on June 2, 2024 10

Rails Webpacker

from materialize-sass.

Comments (3)

wuworkshop commented on June 2, 2024 2

@redhoodie Was wondering the same thing. I think this Medium article does a good job of explaining it:

https://medium.com/@guilhermepejon/how-to-install-materialize-css-in-rails-6-0-0-beta2-using-webpack-347c03b7104e

from materialize-sass.

aurora-a-k-a-lightning commented on June 2, 2024 1

hello :)
i think i found a way to use the javascript of this gem in a default rails 6 app.

enable webpacker to use .erb via rails webpacker:install:erb. this will add the line environment.loaders.prepend('erb', erb) to config/webpack/environment.js
rename app/assets/javascript/packs/application.js -> app/assets/javascript/packs/application.js.erb
import materialize.js from the materialize gem into application.js.erb via ruby tags, so the file will look like this

(from a brand new rails app)

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

// add this line at the bottom! be sure to place any materialize.js api calls after this is loaded
<%= File.read(File.join(Gem.loaded_specs['materialize-sass'].full_gem_path, 'assets', 'javascripts', 'materialize.js')) %>

Now we can use the materialize javascript api like in the documentation!

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, {}); // M is now defined :)
});