build - 在我的 Laravel 项目中使用语义 UI

Question

我在将 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 时，我发现 Assets 路径是错误的:

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

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

提前致谢。

Answer 1

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

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

选择其他问题的选项。

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