如何设置 Weppack 以将 materializecss 与 Phoenix 1.5 + Liveviews 一起使用？

Question

问题：

我不知道如何将 materializecss 嵌入默认脚手架 Elixir/Phoenix 1.5（包括 Liveview）-Project。

每次尝试让它工作都以错误告终。即：jquery 未找到或类似。即使我尝试通过布局文件中的 cdn 链接直接嵌入 js/css，它也不起作用。我想这只是正确配置 Weppack 的问题。

设置：

我正在 Windows 使用 Elixir 1.9.4，Phoenix：1.5，Webpack：4.41.5

预期结果应为：

一个工作成果应该实现以下工作： Side-Nav-Materializecss

这样我就可以调用： $("#my-menu").sideNav();

在模板底部或通过 liveview-hooks。

Answer 1

终于解决了：

重现步骤：

搭建一个启用实时视图的新 phoenix-1.5 项目
添加包到package.json:

"jquery": "^3.6.0", “物化-css”：“^0.100.2”
在assets/css/app.s中添加条目css:

@import "~materialize-css/dist/css/materialize.min.css";
在assets/js/app.js中添加条目：

导入“materialize-css/dist/js/materialize.min”

对于 Liveview，您只需在 app.js 中添加特定的挂钩，即：

Hooks.SetMyMenu = {
  mounted() {
      $("#my-menu").sideNav({
        closeOnClick: true
      });
  }
}

对于简单模板，您只需在模板末尾添加一个脚本，即：

  <script>
        window.addEventListener('load', function () {
            $("#my-menu").sideNav({
                closeOnClick: true
                });
            })
  </script>

如何设置 Weppack 以将 materializecss 与 Phoenix 1.5 + Liveviews 一起使用？

How to setup Weppack to use materializecss with Phoenix 1.5 + Liveviews?

jquery

elixir

materialize

webpack

phoenix-framework