2015-07-30 31 views
5

Mam pewne problemy z integracją SemanticUI w moim projekcie Laravel. Są to zarówno piękne frameworki, niestety nic nie można znaleźć na ten temat.Używanie SemanticUI do mojego projektu Laravel

Najpierw zainstalowałem semantyczną przy użyciu NPM: npm install semantic-ui. Działa to dobrze, ale problemem jest to, że wiele innych pakietów NpM jest zainstalowanych. Również semantyczne statki z mnóstwem zadań, których nie potrzebuję. Laravel dostarcza Eliksirowi do definiowania podstawowych zadań Gulp, z których chcę korzystać.

Poszedłem do semantic github repo i pobrałem folder /src. Skopiowałem folder do mojego projektu Laravel: /resources/assets/semantic/. Następnie w ciągu app.less plików sprowadziłam semantyczny:

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

Więc następnym krokiem było pozwolić Elixer zrobić kompilowania i kopiowania do folderu /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'); 

}); 

ta działa rewelacyjnie. Jedyne, co mnie martwi to to, że aktualizowanie semantyczne musi być wykonywane ręcznie. Jeśli masz jakieś rady dla mnie lub alternatywnej aplikacji, chciałbym to usłyszeć. W ten sposób mój folder public/vendor wygląda po uruchomieniu gulp:

public/vendor

Teraz mam inny problem skierowana jest to, że kiedy spojrzeć na minified CSS, widzę, że ścieżki aktywów są źle:

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

Należy szukać w themes/default/assets/fonts/icons.eot. Jakieś pomysły?

Z góry dziękuję.

+1

Trzeba zastąpić '@ zmiennej fontPath' ... Zobacz http://learnsemantic.com/developing/customizing.html#setting-global-variables. (Oczywiście, ponieważ przenosisz katalog 'themes' (w tym' assets'), a twój wynikowy CSS nie znajduje się na ścieżce przyjętej przez SUI, powinieneś powiedzieć do kodu SUI, gdzie jest nowa ścieżka). –

Odpowiedz

3

Kiedy zapytano, jakiego rodzaju instalacji chciałbym mieć, wybrałem Express (Set components and output folder).

Następnie wybrałem [?] Where should we put Semantic UI inside your project? resources/assets/semantic/.

Wybierz opcje dla innych pytań.

Następnie wpisz ../../../public/semantic monit [?] Where should we output Semantic UI?