如何设置 Webpack 以将物化 css 与 Phoenix 1.5 + Liveview 一起使用？答案

【问题标题】：How to setup Weppack to use materializecss with Phoenix 1.5 + Liveviews?如何设置 Webpack 以将物化 css 与 Phoenix 1.5 + Liveview 一起使用？
【发布时间】：2021-08-06 12:27:45
【问题描述】：

问题：

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

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

设置：

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

预期结果应该是：

一个工作结果应该达到以下工作： Side-Nav-Materializecss

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

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

【问题讨论】：

可以在模板中添加jquery引用，方法很简单。
是的，我以前试过这个，没有运气
您是否尝试将其用于实时取景？如果是这样，那么您将不得不编写一个自定义挂钩来将 jquery 与您的标签附加在一起。

标签： jquery webpack elixir phoenix-framework materialize

【解决方案1】：

我终于能够解决它：

重现步骤：

搭建一个启用实时视图的新 phoenix-1.5-project
将包添加到 package.json：

"jquery": "^3.6.0", "materialize-css": "^0.100.2"
在 assets/css/app.scss 中添加条目：

@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>

【讨论】：