Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Laravel elixir and autoprefixer

So I saw that elixir doesn't automatically use autoprefixer. This is how my gulp file looks:

var Elixir = require('laravel-elixir');
var autoprefixer = require('gulp-autoprefixer');
var gulp = require('gulp');

Elixir.config.sourcemaps = false;

gulp.task('sass', function() {
    return gulp.src('resources/sass/app.scss')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('public/css/app.css'));
});

Elixir(function(mix) {

    // Copy bootstrap.min.js to node vendor directory until it becomes a node module
    mix.copy('public/vendor/bootstrap-4', 'node_modules/bootstrap-4');

    // Combine all vendor scripts
    mix.scripts([
        'bootstrap-4/dist/js/bootstrap.min.js',
        'vue/dist/vue.min.js'
    ], 'public/js/vendor.js', 'node_modules');

    // Combine all files into one single CSS file
    mix.task('sass', 'resources/sass/**/*.scss');

    // Get rid of cached version
    mix.version([
        'public/js/vendor.js',
        'public/css/app.css'
    ]);

});

But it's not issuing autoprefixer still. I get no gulp errors. And when I run gulp watch, it doesn't update whenever I update a .scss file. All my sass files are located under resources/sass

Thanks for any help!

I even tried:

new Task('sass', function() {
    return gulp.src('resources/sass/app.scss')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('public/css/app.css'));
})
.watch('resources/sass/**/*.scss');
like image 569
HaleyBuggs Avatar asked Sep 10 '15 16:09

HaleyBuggs


People also ask

What is elixir in laravel?

Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports several common CSS and JavaScript pre-processors, and even testing tools. Using method chaining, Elixir allows you to fluently define your asset pipeline.

What is Mix() in Laravel?

Laravel Mix, a package developed by Laracasts creator Jeffrey Way, provides a fluent API for defining webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. In other words, Mix makes it a cinch to compile and minify your application's CSS and JavaScript files.

Why use Laravel Mix?

Laravel Mix is a tool for compiling and optimizing assets in a Laravel app. It's similar to a build tool like gulp, Grunt and such like. it's specific to Laravel but can also be used externally as an npm package. Laravel Mix covered 80% of Webpack's use case to make compiling assets easier.


2 Answers

Although currently undocumented, Laravel's Elixir indeed runs your CSS through Autoprefixer, with it's mostly default settings, as found in the package's Config.js:

{
    ...
    css: {
        autoprefix: {
            enabled: true,

            options:  {
                browsers: ['last 2 versions'],
                cascade: false
            }
        },
    }
}

To customize that configuration, you should use the following: 

elixir.config.css.autoprefix = {
    enabled: true, //default, this is only here so you know how to disable
    options: {
        cascade: true,
        browsers: ['last 2 versions', '> 1%']
    }
};

elixir(function(mix) {
    ...
});
like image 144
igorsantos07 Avatar answered Oct 16 '22 02:10

igorsantos07


use this configurations

var elixir = require('laravel-elixir');
config.css.autoprefix.options.browsers =  ['last 15 versions'] ;

elixir(function(mix) {
    mix.sass('index.scss');
});
like image 5
naoufal bardouni Avatar answered Oct 16 '22 02:10

naoufal bardouni