semantic-ui - 如何将 Semantic-UI 添加到 Phoenix

Question

如何将 Semantic-UI 添加到 Phoenix？

Semantic-UI 安装在一个文件夹中并使用 NPM 进行更新，实际的 CSS 和 Javascript 文件是使用 GULP 构建的。完整的安装文件夹应该放在哪里？

是否可以像其他依赖项一样通过 Mix 自动更新？

生成的css和javascript应该放在project/web/static/css(或/js)还是/vendor？

如何设置 Gulp/Sematic-UI 配置以自动将文件放在正确的位置？

同样，Mix 可以自动运行 Gulp/Semantic-UI build 吗？

Answer 1

完整的安装文件夹应该放在哪里？

实际上，您只需要2 个文件:semantic.js 和semantic.css。如果你执行了 npm install --save semantic-ui 你应该在 ./semantic/dist/

中找到它们

那么，这两个文件应该放在哪里呢？这取决于……你是 brunch 还是 webpack？与 phoenix 应用程序相关的是在 ./priv/static 文件夹中找到静态文件(css、js、字体、img 等)，如您在 endpoint.ex 中所见Plug.Static。 Phoenix 不知道您在运行 brunch、webpack 或/和 gulp 之前放置这些文件的目录。

能否通过Mix自动更新...

是，在package.json中添加脚本，在config/dev.exs中修改watchers

生成的css和javascript应该放在project/web/static/css(或/js)还是/vendor？

同样的回答，你是brunch还是webpack？与 phoenix 应用程序相关的是在 ./priv/static 文件夹中找到静态文件(css、js、font、img，...)，如您在 中所见endpoint.ex Plug.Static。 Phoenix 不知道您在运行 brunch、webpack 或/和 gulp 之前放置这些文件的目录。

如何设置 Gulp/Sematic-UI 配置以自动将文件放在正确的位置？

查看文件 ./semantic.json 以设置 gulp 构建命令的输出。

Mix 可以自动运行 Gulp/Semantic-UI build 吗？

是，在package.json中添加脚本，在config/dev.exs中修改watchers

这并不容易，我建议您首先开始使用 npm semantic-ui-css，当您的构建运行良好时切换到 npm semantic-ui