Symfony 4 - 正确的语义 UI 集成

Question

我想在我的 Symfony 4.3 项目中集成语义 UI。 我安装了 npm:

npm install semantic-ui --save

但是在Symfony项目的根目录下建立Semantic文件夹是否正确？

/semantic (default)

或者我必须转到 node_modules 语义文件夹并在那里 运行 gulp 构建？对我如何在 Symfony 中实现正确有帮助吗？

谢谢 麦克

Answer 1

您应该构建所有资产：javascripts、样式表、图像等……捆绑在一起并放入 public/ 目录（在 public/build 或 public/assets 中等等……）。

为此你需要 Webpack，它是目前最好的捆绑器。 Encore 项目将此与 Symfony 很好地集成在一起。查看 documentation 如何在 Symfony 项目中管理资产。

在生产部署后，可以安全地删除远程服务器上的 node_modules 目录以释放磁盘 space。

关于将所有内容连接在一起，请在主应用程序中创建一个 front 目录。在那里创建您的应用程序，例如。 app.js 在其中加载所有 javascript 文件、语义等……使用 Encore：

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('app', './front/app')
  // more skipped for brevity

当您构建项目时，将由 Webpack 发送到 public/build 目录。

在您的 base-template.html.twig 中包括 css 就像放置一样简单：

{{ encore_entry_link_tags('app') }}

在 head 部分和：

{{ encore_entry_script_tags('app') }}

关门前 body.

如果您对 webpack-encore 有任何疑问，请随时 post 提出另一个问题。祝你好运。