MThomas
883
12
Mix

Laravel Elixir and Font-Awesome

Posted 4 years ago by MThomas

Currently I include both my all.css and font-awesome.css files seperately in my appL

<link rel="stylesheet" type="text/css" href="/css/vendor/font-awesome.css">
<link rel="stylesheet" type="text/css" href="{{ elixir("css/all.css") }}">

Now I want to combine both in my app.scss file. In order to include (and manipulate based on its variables) I include bootstrap in my app.scss file:

@import "partials/copyright";
@import "partials/variables";
@import "bootstrap";
@import "partials/typography";
@import "partials/auth";
@import "partials/navigation";

// Etc.

Simply adding @import "font-awsome"; does not work. But how do I get it to work (using versioning if that matters)?

This is the gulpfile I currently use:

elixir(function(mix) {
 mix
    .sass('app.scss')
    .scripts(
   [
    'jquery/dist/jquery.min.js',
    'bootstrap-sass-official/assets/javascripts/bootstrap.js',
   ], 
   'bower_components',
   'public/js/dependencies.min.js'
    )
    .publish(
   'font-awesome/css/font-awesome.min.css',
   'public/css/vendor/font-awesome.css'
    )
    .publish(
   'font-awesome/fonts',
   'public/css/fonts'
    )
    .styles([
   'public/css/app.css'
    ])
    .version("css/all.css");
});

Other solutions to limit the number of requests are welcome :)

Please sign in or create an account to participate in this conversation.