Using SemanticUI for my Laravel project

Question

I'm having some difficulties integrating SemanticUI into my Laravel project. These are both beautiful frameworks, unfortunately there's nothing to find about this topic.

First I installed semantic using NPM: npm install semantic-ui. This works fine, but the problem is that alot of other npm packages are installed aswell. Also, semantic ships with alot of gulp tasks which I don't need. Laravel ships with Elixer for defining basic Gulp tasks, which I do want to use.

I went to the semantic github repo and downloaded the /src folder. I copied the folder into my Laravel project: /resources/assets/semantic/. Then within the app.less files I imported semantic:

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

So the next step was to let Elixer do the compiling and copying to the /public folder:

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');

});

This works excellent. The only thing I'm concerned about is that updating semantic must be done by the hand. If you have any advice for me or an alternative approuch I'd love to hear that. This is how my public/vendor folder looks like after running gulp:

Now the other problem I'm facing is that when I take a look at the minified CSS, I see that the asset paths are wrong:

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

It should be looking in themes/default/assets/fonts/icons.eot. Any ideas?

Thanks in advance.

Answer 1

When they asked what kind of install I would like to have, I chose Express (Set components and output folder).

Then, I chose [?] Where should we put Semantic UI inside your project? resources/assets/semantic/.

Choose your options for other questions.

Then, type ../../../public/semantic when prompted [?] Where should we output Semantic UI?