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');
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.
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.
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.
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) {
...
});
use this configurations
var elixir = require('laravel-elixir');
config.css.autoprefix.options.browsers = ['last 15 versions'] ;
elixir(function(mix) {
mix.sass('index.scss');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With