kro's avatar
Level 1

prepend CSS rule after mix processing

Hello,

I'm trying to prepend every rules in my final public/css/admin.css with a .admin CSS class. This file is a mix of processed scss and concatenated css from vendors.

Since I don't know how to handle single files in procedural way with Laravel-mix and webpack, I chose to trigger Gulp through mix.then().

Here is my setup :

webpack.mix.js :

const { mix } = require('laravel-mix');
let gulp = require('gulp');
require('./gulpfile');

mix
    .autoload({
        jquery: ['$', 'window.jQuery']
    })
    .js([
        'resources/assets/js/admin.js'
    ], 'public/js/admin.js')
    .js([
        'resources/assets/js/front.js'
    ], 'public/js/front.js')
    .extract([
        'jquery-ui',
        'vue',
        'nestable2',
        'materialize-css'
    ])
    .sass('resources/assets/sass/front.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css')
    .styles([
        'node_modules/normalize.css/normalize.css',
        'public/css/front.css'
    ], 'public/css/front.css')
    .styles([
        'node_modules/normalize.css/normalize.css',
        'public/css/admin.css',
        'node_modules/nestable2/jquery.nestable.css'
    ], 'public/css/admin.css')
    .sourceMaps()
    .then(function(){
        gulp.start();
    });

and gulpfile.js :

let gulp = require('gulp');
let postcss = require('gulp-postcss');
let prependSelector = require('postcss-prepend-selector');

gulp.task('prependAdminSelector', function () {
    let plugins = [
        prependSelector({selector:'.admin '})
    ];
    return gulp.src('./public/css/admin.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./public/css/'));
});
gulp.task('default', ['prependAdminSelector']);

In my final /public/css/admin.css, .admin is added only to the rules defined in resources/assets/sass/admin.scss and not to other rules that have been concatenated using mix.styles().

So it seems that mix.then() is triggered after mix.sass() (ok) but before mix.styles(), which looks like an issue to me...

But since this setup looks a bit tricky anyway, I would be happy to know if anyone has a more straightforward solution (to add .admin to every rules in admin.css but not front.css), or any workaround idea if not.

Unfortunately postCss option in mix will behave the same and only apply to the content processed with sass, plus for both admin.scss and front.scss.

Thank you !

0 likes
0 replies

Please or to participate in this conversation.