Grunt-Sass Libsass import sprites

Grunt-Sass Libsass import sprites - Javascript/Node.js - Programmation

Marsh Posté le 04-03-2016 à 10:04:34    

bonjour,
 
Je suis en train de faire la migration de Compass/Ruby vers Compass/Libsass via Grunt
 
Jusqu’à maintenant j’utilisais Ruby pour compiler mes fichiers .scss via un batch compass.bat qui se basait sur le config.rb (à la racine du projet) dont le contenu est :
 

environment = :development
 
http_path = "/"
css_dir = "assets/css"
sass_dir = "assets/scss"
images_dir = "assets/images"
javascripts_dir = "assets/js"
sass_options = { :debug_info => true }


 
Tout ce passe bien, mais la compilation est très lente ; elle peut parfois dépasser les 3 min !!!
 
Donc je me suis renseigné sur l’utilisation de LibSass via Grunt, j’ai suivi plusieurs tutos pour le mettre en place.
 
J’ai lancé les commandes suivantes :
 

npm install grunt-sass --save-dev


-> pour installer node-sass et sass pour Grunt
 

npm install compass-importer --save-dev


-> pour avoir les librairies par défaut de Compass
 
 
En suite j’ai ajouté dans mon GruntFile.js les lignes suivantes :
 

module.exports = function (grunt) {
    var compass = require('compass-importer');
 
    "use strict";
 
     var conf = {
         sass: {
            options: {
                sourceMap: false,
                outputStyle: 'compressed',
                importer: compass
            },
            dist: {
                files: [{
                    expand: true,
                    cwd: 'assets/scss',
                    src: ['**/*.scss'],
                    dest: 'assets/css',
                    ext: '.css'
                }]
            }
        }
    };
 
    grunt.config.init(conf);
 
    grunt.registerTask('css', ['sass:dist']);
    grunt.loadNpmTasks('grunt-sass');
};


 
Et c’est à partir d’ici que j’ai un soucis.
Lorsque je lance un grunt css, j’ai une erreur :
 

> grunt css
Running "sass:dist" (sass) task
>> File to import not found or unreadable: icons/sprites/*.png
>> Parent style sheet: C:/mon_projet/assets/scss/users/_mainstyle.scss
>>   Line 268  Column 1  assets\scss\users\_mainstyle.scss
Warning:  Use --force to continue.
 
Aborted due to warnings.


 
 
La ligne 268 du fichier _mainstyle.scss contient :
 

@import "icons/sprites/*.png";


 
Toutes les images (sprites) se trouvent dans le dossier assets/images/ de mon projet
 
Je ne trouve pas comment paramétrer Compass dans Grunt pour qu’il trouve le dossier des images, comme dans le config.rb initial.
 
J’ai essayé plusieurs modules grunt (grunt-libsass-image, grunt-spritesmith, …), mais pas d’amélioration, toujours la même erreur.
 
Ca fait une semaine que je cherche partout sur Google une solution, mais je me casse les dents :(
 
Si qq’un maitrise le sujet, je suis preneur de n’importe quel conseil ou piste.
 
Merci

Reply

Marsh Posté le 04-03-2016 à 10:04:34   

Reply

Marsh Posté le 07-03-2016 à 10:09:39    

J'ai trouvé des paramètres supplémentaires à placer dans la partie 'options', imagePath et inlcudePaths :
 

    sass: {
        options: {
            sourceMap: false,
            outputStyle: 'compressed',
            importer: compass,
            imagePath: '/assets/images/',
            includePaths: ['assets/images/']
        },


 
Mais malheureusement ca ne change rien :(
 
J'ai également ajouté le module compass-importer, mais ca n'a rien amélioré non plus.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed