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 :
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.mix.then()
(ne fonctionne pas, voir détails en dessous)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 ?
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)