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

1 réponse


Dionyzos
Auteur

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.