如何将 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 可以自动构建吗？

Answer 1

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

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

中找到它们

那么，这2个文件应该放在哪里呢？ 这取决于……你是 b运行ch 还是 webpack？与 phoenix 应用程序相关的是在 ./priv/static 文件夹中找到静态文件（css、js、font、img、...），如您在 中所见endpoint.exPlug.Static。 Phoenix 不知道你在运行ning b运行ch, webpack or/and gulp.

之前把这些文件放在哪里

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

是，在package.json添加脚本，在[=72=修改watchers ].exs

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

同答，你是b运行ch还是webpack？与 phoenix 应用程序相关的是在 ./priv/static 文件夹中找到静态文件（css、js、字体、img、...）你可以在endpoint.exPlug.Static中看到。 Phoenix 不知道你在运行ning b运行ch, webpack or/and gulp.

之前把这些文件放在哪里

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

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

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

是，在package.json添加脚本，在[=72=修改watchers ].exs

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

Answer 2

将 Semantic UI LESS only Distribution 与 Phoenix 应用程序集成 qui 很容易 ，需要一点技巧。我建议您使用 Webpack 而不是 brunch/gulp，因为它在很多插件中相对流行并且易于配置。

在开始该过程之前，预计 Phoenix App 已安装默认 B运行ch build 工具并且它正在运行。

集成 Webpack

请按照我的语义 UI 和 Webpack 集成详解 guide 进行详细的分步过程。这个答案参考了这篇文章。 Link: How to Integrate Your Phoenix Application with Semantic UI and Webpack

集成语义UI

在安装 Semantic UI 之前，我们需要进行一些配置。我们将创建一个新的语义修复文件。

vim web/static/lib/semantic-fix.js

将以下内容粘贴到我们刚刚创建的 semantic-fix.js 文件中。该文件将负责将所有语义 UI 资产放在适当的位置，以便在我们的应用程序中使用它

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

var fs = require('fs');

// relocate default config
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../src/semantic/theme.config';\n",
  'utf8'
);

// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');

function fixFontPath(filename) {
  var content = fs.readFileSync(filename, 'utf8');
  var newContent = content.replace(
    "@fontPath  : '../../themes/",
    "@fontPath  : '../../../themes/"
  );
  fs.writeFileSync(filename, newContent, 'utf8');
}

我们将为语义 UI 创建一个自定义 theme.config 文件。因此，如下更改 semantic-fix.js 文件中的路径位置：

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

// Old default code
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../src/semantic/theme.config';\n",
  'utf8'
);

将其替换为以下代码：

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

// Relocate default config
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../web/static/css/theme.config';\n",
  'utf8'
);

我最近写了一个深入的分步教程，将语义 UI 框架与基于 Elixir 的 Phoenix 应用程序和 Webpack 集成。

添加语义-fix.js 需要在每个 postinstall 回调上运行安装 npm 包。因此，我们将按如下方式将其放置在 package.json scripts 部分下。

// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------

{
  ...
  "scripts": {
    ...
    "postinstall": "node semantic-fix.js",
    ...
  }
  ...
}

现在是安装 Semantic UI LESS 包的时候了。安装后，semantic-fix.js 文件将从 postinstall 脚本调用。

npm install --save semantic-ui-less && node semantic-fix.js

Semantic UI安装完成后，我们需要将node_modules/semantic-ui-less/theme.config.example复制到web/static/css/theme.config。

cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config

将现有路径覆盖为我们的路径

/* Path to site override folder */
@siteFolder  : '../../web/static/css/site';

&

// @import "theme.less";
@import "~semantic-ui-less/theme.less";

将语义 LESS 初始化文件 node_modules/semantic-ui-less/semantic.less 复制到 web/static/css。此文件导入不同的组件样式。

将此文件的导入语句的位置从 @import "definitions/...."' 更改为 @import "~semantic-ui-less/definitions/...."

同样我们需要添加semantic.js文件到web/static/js文件夹来导入所有JavaScript组件如下：

//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------

import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';

import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';

web/static/js/app.js 是我们 webpack 配置中的入口文件。因此，我们需要将包括语义 UI 文件在内的所有文件导入到 app.js。在 app.js 文件

末尾添加以下行

//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------

...
...

import "./semantic.js";
import '../css/semantic.less';

集成现已完成并准备运行。 Semantic UI 现已与 webpack 完全集成，是时候尝试一下了。运行来自项目根目录的 Phoenix 服务器 mix phoenix.server。它应该触发 webpack 编译所有文件，包括 semantic-ui - mix phoenix.server

这个过程在我的文章（Linked on the top）中有更详细的记录，如果有任何混淆，可以参考。

希望对您有所帮助。

Answer 3

将 Semantic UI LESS only Distribution 与 Phoenix 应用程序集成 qui 很容易 ，需要一点技巧。我建议您使用 Webpack 而不是 brunch/gulp，因为它在很多插件中相对流行并且易于配置。

在开始该过程之前，预计 Phoenix App 已安装默认 B运行ch build 工具并且它正在运行。

集成 Webpack

请按照我的语义 UI 和 Webpack 集成详细 guide 进行深入的逐步过程。这个答案参考了这篇文章。 Link: How to Integrate Your Phoenix Application with Semantic UI and Webpack

集成语义UI

在安装 Semantic UI 之前，我们需要进行一些配置。我们将创建一个新的语义修复文件。

vim web/static/lib/semantic-fix.js

将以下内容粘贴到我们刚刚创建的 semantic-fix.js 文件中。该文件将负责将所有语义 UI 资产放在适当的位置，以便在我们的应用程序中使用它

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

var fs = require('fs');

// relocate default config
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../src/semantic/theme.config';\n",
  'utf8'
);

// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');

function fixFontPath(filename) {
  var content = fs.readFileSync(filename, 'utf8');
  var newContent = content.replace(
    "@fontPath  : '../../themes/",
    "@fontPath  : '../../../themes/"
  );
  fs.writeFileSync(filename, newContent, 'utf8');
}

我们将为语义 UI 创建一个自定义 theme.config 文件。因此，如下更改 semantic-fix.js 文件中的路径位置：

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

// Old default code
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../src/semantic/theme.config';\n",
  'utf8'
);

将其替换为以下代码：

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

// Relocate default config
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../web/static/css/theme.config';\n",
  'utf8'
);

我最近写了一个深入的分步教程，将语义 UI 框架与基于 Elixir 的 Phoenix 应用程序和 Webpack 集成。

添加语义-fix.js 需要在每个 postinstall 回调上运行安装 npm 包。因此，我们将按如下方式将其放置在 package.json scripts 部分下。

// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------

{
  ...
  "scripts": {
    ...
    "postinstall": "node semantic-fix.js",
    ...
  }
  ...
}

现在是安装 Semantic UI LESS 包的时候了。安装后，semantic-fix.js 文件将从 postinstall 脚本调用。

npm install --save semantic-ui-less && node semantic-fix.js

Semantic UI安装完成后，我们需要将node_modules/semantic-ui-less/theme.config.example复制到web/static/css/theme.config。

cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config

将现有路径覆盖为我们的路径

/* Path to site override folder */
@siteFolder  : '../../web/static/css/site';

&

// @import "theme.less";
@import "~semantic-ui-less/theme.less";

将语义 LESS 初始化文件 node_modules/semantic-ui-less/semantic.less 复制到 web/static/css。此文件导入不同的组件样式。

将此文件的导入语句的位置从 @import "definitions/...."' 更改为 @import "~semantic-ui-less/definitions/...."

同样我们需要添加semantic.js文件到web/static/js文件夹来导入所有JavaScript组件如下：

//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------

import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';

import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';

web/static/js/app.js 是我们 webpack 配置中的入口文件。因此，我们需要将包括语义 UI 文件在内的所有文件导入到 app.js。在 app.js 文件

末尾添加以下行

//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------

...
...

import "./semantic.js";
import '../css/semantic.less';

集成现已完成并准备运行。 Semantic UI 现已与 webpack 完全集成，是时候尝试一下了。运行来自项目根目录的 Phoenix 服务器 mix phoenix.server。它应该触发 webpack 编译所有文件，包括 semantic-ui - mix phoenix.server

这个过程在我的文章（Linked on the top）中有更详细的记录，如果有任何混淆，可以参考。

希望对您有所帮助。

如何将 Semantic-UI 添加到 Phoenix

How to add Semantic-UI to Phoenix

elixir

semantic-ui

集成 Webpack

集成语义UI

集成 Webpack

集成语义UI