Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1135 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Grunt-Sass Libsass import sprites

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Grunt-Sass Libsass import sprites

n°2276933
Dionyzos
nom de Dio
Posté le 04-03-2016 à 10:04:34  profilanswer
 

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

mood
Publicité
Posté le 04-03-2016 à 10:04:34  profilanswer
 

n°2277107
Dionyzos
nom de Dio
Posté le 07-03-2016 à 10:09:39  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Grunt-Sass Libsass import sprites

 

Sujets relatifs
import fichier csvavec ubuntu ??? operation non permise[VBA] Import image
[POWER SHELL] Problème d'import de module Active Directory[RESOLU] Postgresql pb d'import fichier CSV avec la commande COPY
macro Excel import csvAutomatisation des sprites avec Gulp / Grunt
import base oracleoracle [11gr2] importer un dumpfile et logfile avec un datapump import
Import... où passent mes variables ? 
Plus de sujets relatifs à : Grunt-Sass Libsass import sprites


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR