How to get Bulma CSS framework to work with Laravel Elixir?

Question

installed Bulma CSS framework with npm. Now I am trying to get Bulma to work with Laravel Elixir. So far I have this in my gulpfile.js :

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir((mix) => {
    mix
        .webpack('app.js')
        .styles([
            './node_modules/bulma/css/bulma.css'
        ])
        .sass('app.scss');
    mix.version(['css/app.css', 'js/app.js']);
});

But nothing seems to work. Any idea how to get it working properly?

Thank you in advance.

Answer 1

Thanks to the comment of retrograde, I was able to understand better the way Laravel Elxir works and I found a solution to my problem. I commented my gulpfile.js. Maybe it will help someone else.

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir((mix) => {
    // Retrieve the file from the node_module folder
    mix.copy('node_modules/bulma/css/bulma.css', 'resources/assets/css');

    // Compile app.scss and specify a destination
    mix.sass('app.scss', 'resources/assets/css/app.css');

    // Combine Bulma and my stylesheet (filename will be all.css by default) 
    mix.styles(['bulma.css', 'app.css']);

    // Compile and bundle ECMAScript 2015 into plain JavaScript
    mix.webpack('app.js');

    // See Laravel documentation: https://laravel.com/docs/5.3/elixir#versioning-and-cache-busting
    mix.version(['css/all.css', 'js/app.js']);
});