Bonjour à tous,
Voila je rencontre un petit problème avec mon code sur Laravel 7.
Ce que je fais
J'utilise laravel-mix pour gérer rapidement tous mes assets. Voici le code :
const mix = require('laravel-mix');
//
// SASS - Compile SASS files into CSS
//
mix.sass('resources/assets/scss/theme.scss', 'resources/assets/css/theme-bis.css');
//
// Minify CSS - Merges and minifies the below given list of Space libraries into one theme.min.css
//
// Frontend CSS
mix.styles([
'resources/assets/css/theme.css'
], 'public/css/theme.css');
mix.combine([
'resources/assets/css/theme.css'
], 'public/css/theme.min.css');
// Backend CSS
mix.styles([
'resources/assets/css/theme.css',
'resources/assets/css/docs.css'
], 'public/css/admin-theme.css');
mix.combine([
'resources/assets/css/theme.css',
'resources/assets/css/docs.css'
], 'public/css/admin-theme.min.css');
//
// Minify JS - Merges and minifies the below given list of Space libraries into one theme.min.js
//
mix.scripts([
'resources/assets/js/hs.core.js',
'resources/assets/js/hs.chartjs.js',
'resources/assets/js/hs.circles.js',
'resources/assets/js/hs.clipboard.js',
'resources/assets/js/hs.countdown.js',
'resources/assets/js/hs.cubeportfolio.js',
'resources/assets/js/hs.datatables.js',
'resources/assets/js/hs.dropzone.js',
'resources/assets/js/hs.fancybox.js',
'resources/assets/js/hs.flatpickr.js',
'resources/assets/js/hs.ion-range-slider.js',
'resources/assets/js/hs.leaflet.js',
'resources/assets/js/hs.pwstrength.js',
'resources/assets/js/hs.selectpicker.js',
'resources/assets/js/hs.slick-carousel.js',
'resources/assets/js/hs.summernote-editor.js',
'resources/assets/js/hs.tagify.js',
'resources/assets/js/hs.validation.js',
'resources/assets/js/theme-custom.js'
], 'public/js/theme.js');
mix.combine([
'resources/assets/js/hs.core.js',
'resources/assets/js/hs.chartjs.js',
'resources/assets/js/hs.circles.js',
'resources/assets/js/hs.clipboard.js',
'resources/assets/js/hs.countdown.js',
'resources/assets/js/hs.cubeportfolio.js',
'resources/assets/js/hs.datatables.js',
'resources/assets/js/hs.dropzone.js',
'resources/assets/js/hs.fancybox.js',
'resources/assets/js/hs.flatpickr.js',
'resources/assets/js/hs.ion-range-slider.js',
'resources/assets/js/hs.leaflet.js',
'resources/assets/js/hs.pwstrength.js',
'resources/assets/js/hs.selectpicker.js',
'resources/assets/js/hs.slick-carousel.js',
'resources/assets/js/hs.summernote-editor.js',
'resources/assets/js/hs.tagify.js',
'resources/assets/js/hs.validation.js',
'resources/assets/js/theme-custom.js'
], 'public/js/theme.min.js');
//
// Copy Vendors - a utility to copy client-side dependencies into a folder
//
mix.copyDirectory('resources/assets/vendor', 'public/vendor-bis');
Ce que je veux
Avec Gulpfile.js, je fais :
//
// SASS - Compile SASS files into CSS
//
function scss() {
return gulp
.src('./resources/assets/scss/**/*.scss')
.pipe(sass({ outputStyle: 'expanded' }))
.pipe(rename('app.css'))
// .pipe(gulp.dest('./public/css/'))
.on('error', sass.logError)
.pipe(autoprefixer([
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"], { cascade: true }))
.pipe(gulp.dest('./resources/assets/css/'));
}
D'où ce code dans mon fichier webpack.mix.js :
mix.sass('resources/assets/scss/theme.scss', 'resources/assets/css/theme-bis.css');
Ce que j'obtiens
Rien. Le theme-bis.css n'est pas créé dans resources/assets/css/. Quand je lance dans le terminale npm run production, ça me dit :
> @ production /var/www/angy.fr
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
DONE Compiled successfully in 6304ms 11:37:35
Asset Size Chunks Chunk Names
/css/admin-theme.css 351 KiB [emitted]
/css/admin-theme.min.css 351 KiB [emitted]
/css/theme.css 345 KiB [emitted]
/css/theme.min.css 345 KiB [emitted]
/js/theme.js 38.7 KiB [emitted]
/js/theme.min.js 38.7 KiB [emitted]
images/circle-preloader.svg?647a7a723ed223b0c37dde778d8efb60 702 bytes [emitted]
resources/assets/css/theme-bis.css 320 KiB 0 [emitted] [big] mix
La dernière ligne, je comprend qu'il ne l'a pas créé. Mais pourquoi ? Est-ce un problème de résolution avec les @import dans mon fichier scss ? Mon fichier theme.scss ressemble à ceci :
// Bootstrap setup
@import '../vendor/bootstrap/scss/functions';
// Front setup
@import 'front/variables';
// Custom setup
@import 'user-variables';
// Bootstrap core
@import '../vendor/bootstrap/scss/bootstrap';
@import 'front/front';
// Custom core
@import 'user';
Dans le terminal ci-dessous, ça fonctionne bien par contre :
sass /var/www/angy.fr/resources/assets/scss/theme.scss /var/www/angy.fr/resources/assets/css/theme-bis.css
Merci d'avance.