Grunt-Sass Libsass et import sprites png
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:
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:
npm install grunt-sass --save-dev
-> pour installer node-sass et sass pour Grunt
Code:
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:
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:
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:
@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
