suite à ce sujet je cherche à faire précéder toutes mes règles CSS par le selecteur .admin dans mon fichier de sortie : public/css/admin.css. Il y a plugin postcss-prepend-selector pour ça.

Je ne vois pas trop comment faire ça avec Laravel Mix, du coup j'ai testé plusieurs approches :

  • l'option PostCSS de Laravel ne semble pas convenir telle quelle : le selecteur est ajouté seulement sur les fichiers traités par sass, et sur tous les fichiers sans distinction.
  • configuration personnalisée de webpack dans Laravel Mix (je n'arrive à rien mais ce serait ma solution préférée, je peux poster les détails de mes essais si besoin)
  • utilisation de Gulp déclenché depuis mix.then() (ne fonctionne pas, voir détails en dessous)
  • utilisation de Gulp avec npm (npm-run-all en l'occurrence) défini dans mes scripts npm run ... dans package.json. ça fonctionne, mais c'est tordu et ça ne fonctionne pas avec un watcher (ou alors il en faudrait peut-être 2, executés en parallèle...)

pour la 2e tentative (gulp et mix.then) voici mon 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();
    });

et 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']);

Dans mon public/css/admin.css de sortie, .admin est ajouté seulement sur les règles définies dans resources/assets/sass/admin.scss et pas sur les autres éléments concaténés avec mix.styles().

On dirait que mix.then() est déclenché après mix.sass() (ok) mais avant mix.styles(), ce qui me pose problème.

Mais je trouve que ce setup est tordu de toute façon, quelqu'un aurait une idée pour une façon plus simple d'ajouter un selecteur .admin à chaque règle dans admin.css mais pas dans front.css avec Laravel Mix ? Quelle serait la manière "orthodoxe" de faire ?

1 réponse


wesh poussin
Auteur
Réponse acceptée

finalement j'ai trouvé le moyen de résoudre mes problèmes en passant par des fichiers temporaires entre la compilation sass et la concaténation CSS (pour éviter l'édition in place) :

mix
    .sass('resources/assets/sass/front.scss', 'public/storage/tmp')
    .sass('resources/assets/sass/admin.scss', 'public/storage/tmp')
    .styles([
        'node_modules/normalize.css/normalize.css',
        'public/storage/tmp/front.css'
    ], 'public/css/front.css')
    .styles([
        'node_modules/normalize.css/normalize.css',
        'public/storage/tmp/admin.css',
        'node_modules/nestable2/jquery.nestable.css'
    ], 'public/css/admin.css')
    .sourceMaps()
    .then(function(){
        gulp.run();
    });

du coup ça fonctionne avec 2 watchers en parallèle via npm-run-all et ça marche surtout maintenant parfaitement avec mix.then() (pour une raison que je ne comprends pas). C'est une solution qui me convient assez bien et que je vais garder pour le moment.

ceci dit si il y a une solution beaucoup plus simple à côté de laquelle je serais passé, je prends quand même ! ;)

(du coup j'attends un peu avant de marquer comme résolu)