在我的 Laravel 项目中使用 SemanticUI答案

【问题标题】：Using SemanticUI for my Laravel project在我的 Laravel 项目中使用 SemanticUI
【发布时间】：2015-07-30 17:56:26
【问题描述】：

我在将 SemanticUI 集成到我的 Laravel 项目中时遇到了一些困难。这些都是漂亮的框架，遗憾的是没有关于这个主题的内容。

首先我使用 NPM 安装语义：npm install semantic-ui。这很好用，但问题是还安装了许多其他 npm 包。此外，语义附带了很多我不需要的 gulp 任务。 Laravel 附带 Elixer 用于定义基本的 Gulp 任务，我确实想使用它。

我去了semantic github repo 并下载了/src 文件夹。我将文件夹复制到我的 Laravel 项目中：/resources/assets/semantic/。然后在我导入语义的app.less 文件中：

/**
* Import the SemanticUI source
*/
@import '../semantic/src/semantic';

所以下一步就是让 Elixer 进行编译并复制到 /public 文件夹：

elixir(function(mix) {

    // Semantic LESS
    mix.less([
        'app.less'
    ], 'public/vendor/semantic/semantic.css');

    // Semantic JS
    mix.scriptsIn([
        'resources/assets/semantic/src/definitions/'
    ], 'public/vendor/semantic/semantic.js'); // js: resources/assets/semantic/src/definitions/{folder}/{script}.js

    // Semantic Themes
    mix.copy('resources/assets/semantic/src/themes', 'public/vendor/semantic/themes');

});

这很好用。我唯一担心的是更新语义必须手动完成。如果您对我有任何建议或替代方法，我很乐意听到。这是我的public/vendor 文件夹在运行gulp 后的样子：

现在我面临的另一个问题是，当我查看缩小的 CSS 时，我发现资产路径是错误的：

src: url("../../themes/default/assets/fonts/icons.eot");
// and more wrong paths...

它应该在themes/default/assets/fonts/icons.eot 中查找。有什么想法吗？

提前致谢。

【问题讨论】：

您需要覆盖@fontPath 变量...参见learnsemantic.com/developing/…。（显然，由于您移动了 themes 目录（包括 assets）并且生成的 CSS 不在 SUI 假定的路径上，您应该告诉 SUI 代码新路径在哪里）。

标签： build less laravel-5 gulp semantic-ui

【解决方案1】：

当他们问我想要什么样的安装时，我选择了Express (Set components and output folder)。

然后，我选择了[?] Where should we put Semantic UI inside your project? resources/assets/semantic/。

选择其他问题的选项。

然后，当提示[?] Where should we output Semantic UI?时输入../../../public/semantic

【讨论】：