Discussion :

[Dionyzos]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

npm install grunt-sass --save-dev

-> pour installer node-sass et sass pour Grunt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
> 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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

@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

[Dionyzos]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
     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.