How to write a BEM build for Laravel Mix?

Question

Building projects

I have the following assembly on gulp:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concatcss = require('gulp-concat'),
    clean = require('gulp-clean'),
    plumber = require('gulp-plumber'),
    prefix = require('gulp-autoprefixer'),
    concatjs = require('gulp-concat'),
    browserSync = require('browser-sync').create();

gulp.task('blocks', function() {
    return gulp.src('resources/assets/sass/blocks/**/*.scss')
        .pipe(plumber())
        .pipe(concatcss("_blocks.scss"))
        .pipe(gulp.dest('resources/assets/sass/build/'))
        .pipe(browserSync.stream());
});

gulp.task('sass', function() {
    return gulp.src('resources/assets/sass/main.scss')
        .pipe(plumber())
        .pipe(sass().on('error', sass.logError))
        .pipe(prefix({
            browsers: ['last 10 versions'],
            cascade: true
        }))
        .pipe(gulp.dest('public/css'))
        .pipe(browserSync.stream());
});

gulp.task('clean', function () {
    return gulp.src('resources/assets/sass/build/_blocks.scss', {read: false})
        .pipe(clean())
    .pipe(browserSync.stream());
});


gulp.task('watch', function() {
    browserSync.init({
        server: "./app"
    });

    gulp.watch('resources/assets/sass/blocks/**/*.scss', gulp.series('blocks', 'sass', 'clean'));
});

In fact, everything is standard. The only feature is the blocks command, which pre-assembles the resulting blocks.scss from several files, where I, using BEM, separately render the blocks.
How to write the same for Laravel Mix?

Answer 1

Do you need it? Laravel Mix is ​​an add-on to webpack, and not the latest version of it. If you already have a gallp set up, then there is not much point in moving to a mix. Webpack is all about modules, and to reap the benefits, you need to break your code into modules, and not think about beams.