2015-07-30 40 views
5

У меня возникли трудности с интеграцией SemanticUI в проект Laravel. Это оба прекрасные рамки, к сожалению, нет ничего, что можно было бы найти по этой теме.Использование SemanticUI для моего проекта Laravel

Сначала я установил семантику, используя NPM: npm install semantic-ui. Это прекрасно работает, но проблема в том, что многие другие пакеты npm также установлены. Кроме того, семантические корабли с большим количеством задач, которые мне не нужны. 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:

public/vendor

Теперь другая проблема я столкнулся в том, что, когда я смотрю на уменьшенная CSS, я вижу, что пути активов неправильны:

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

Следует искать в themes/default/assets/fonts/icons.eot. Есть идеи?

Заранее спасибо.

+1

Вам необходимо переопределить '@ переменной fontPath' ... См http://learnsemantic.com/developing/customizing.html#setting-global-variables. (Очевидно, что, поскольку вы перемещаете свой каталог 'themes' (включая« активы »), и полученный вами CSS не находится на пути, предполагаемом SUI, в любом случае вы должны указать SUI-код, где находится новый путь). –

ответ

3

Когда они спросили, какую установку я хотел бы иметь, я выбрал 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?

Смежные вопросы