Search code examples
laravel-5uikitlaravel-elixir

Laravel using UIkit


I've created new project on my local XAMPP server using composer

composer create-project laravel/laravel ad dev-develop

then I installed UIkit via composer

composer require uikit/uikit

and I got UIkit in vendor folder in my project
enter image description here

But I don't understand what should I do next? How to compile uikit.less in css file and which folder should I use to keep my css files ?


Solution

  • You should put your final css files somewhere in public directory, for example public/css.

    To achieve that you should have for example installed npm and gulp, now you can in gulpfile.js write something like that:

    elixir(function (mix) {
        mix.less('uikit.less');
    });
    

    And now when you run gulp it will create uikit.css file in public/css directory. You should read about Laravel Elixir to understand what is happening here.

    You should also make sure you really want to use dev-develop branch of Laravel instead of master.

    EDIT

    If your less files is in different directory you should do something like this:

    elixir(function (mix) {
         mix.less('../../../here-you-put-rest-of-path/uikit.less');
    });
    

    so in your case path should be something like this:

    ../../../vendor/uikit/uikit/src/less/uikit.less
    

    because default directory is resources/assets/less and in case you want to use custom directory you need to use ../ to go out of this directory and use your custom directory (absolute path seems to not work)