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 ?