使用 Webpack 将语义 UI 添加到 Phoenix v1.4.3

Posted 2023-03-07

【中文标题】使用 Webpack 将语义 UI 添加到 Phoenix v1.4.3

【英文标题】：Adding Semantic UI to Phoenix v1.4.3 with Webpack

【发布时间】：2019-09-07 22:27:01

【问题描述】：

我是 Phoenix、Elixir 和 Semantic 的新手。

我在寻找如何在最新版本 1.4.3 中将语义 UI 添加到 Phoenix 的示例时遇到问题，其中文件结构似乎发生了一些变化，现在使用 Webpack 而不是早午餐来生成资产。关于如何在新版本发布之前将 Semantic 与 Phoenix 集成的教程，我不确定将某些文件夹/文件放在哪里。

我看过这些网站：

https://www.icicletech.com/blog/how-to-integrate-your-phoenix-application-with-semantic-ui-and-webpack#semantic

How to add Semantic-UI to Phoenix

https://medium.com/@kimlindholm/adding-semantic-ui-sass-to-phoenix-with-webpack-36c7c96ef4e1

我一直在测试将 Semantic 安装到我的项目中，我得到了一个 semantic 文件夹、semantic.json 文件，并且我的 package-lock.json 和 package.json 文件得到了更新。

我将包含文件夹 src 和 tasks 的 semantic 文件夹移动到我的 assets/static 文件夹中，并更新了我的 endpoint.ex 文件以包含以下内容：

  plug Plug.Static,
    at: "/",
    from: :app,
    gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt semantic)

不确定接下来的步骤。

【问题讨论】：

你期待什么？什么不起作用？

既然您有 Phoenix 1.3 的教程，请考虑先安装和使用它。让它工作后，按照 1.4 版的升级说明进行操作。

【参考方案1】：

这个问题很久以前就被问过了。可能是提出问题的人得到了解决方案。但我回答这个问题是为了帮助其他仍在寻找解决方案的人。我有类似的要求（将语义 UI 与 Phoenix 框架集成）。以下链接帮助我逐步完成了程序。请关注。

 https://medium.com/@fivetwentysix/setting-up-semantic-ui-on-phoenix-framework-2cbd1d9c135