[Laravel-Mix] mix.sass ne fonctionne pas

Ce sujet est résolu
37414
,

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.

1 Réponse

37414
,

Problème résolu, voici le code :

const mix     = require('laravel-mix');

mix.options({
    publicPath: './'
})

if (mix.inProduction()) {
    cssFrontend = 'public/css/theme.min.css';
    cssBackend  = 'public/css/admin.min.css';
    jsTheme     = 'public/js/theme.min.js';
} else {
    cssFrontend = 'public/css/theme.css';
    cssBackend  = 'public/css/admin.css';
    jsTheme     = 'public/js/theme.js';
}

//
// SASS - Compile SASS files into CSS
//

mix.sass('resources/assets/scss/theme.scss', 'resources/assets/css/theme.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'
], cssFrontend);

// Backend CSS
mix.styles([
    'resources/assets/css/theme.css',
    'resources/assets/css/docs.css'
], cssBackend);

//
// 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'
], jsTheme);

//
// Copy Vendors - a utility to copy client-side dependencies into a folder
//

mix.copyDirectory('resources/assets/vendor', 'public/vendor');