SASS et l'éditeur de texte

juanpa
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec l'utilisation de Sass

Ce que je fais

J'ai suivi le tuto du CSS maintenable à l'aide de Sass et Compass. La première fois tout avait fonctionné comme je le souhaitais.
Mais cette fois, ce n'est pas que ça ne fonctionne pas, mais j'ai mon projet sous PhpStorm et quand je lance la commande dans Powershell : 

sass --watch sass:css

Ca m'ouvre l'éditeur sublimeText 2 et quand je modifie et enregistre via sulimeText ça me crée juste un fichier dans le dossier sass, nommé sass sans extension avec le contenu de ce que j'ai mis dans le fichier via sublimeText. Pourtant les fichiers SCSS s'ouvre avec 'phpStorm'

Ce que j'obtiens

Si je désistalle sublimeText et que je relance la commande

sass --watch sass:css

j'obtiens une erreur

`Le programme « sass.js » n’a pas pu s’exécuter : Application introuvableAu caractère Ligne:1 : 1

Merci ;)

NB: Je suis sous Windows 10

EDIT: Si je lance la commande via le terminal de PhpStorm, il m'ouvre la fenêtre contextuelle pour choisir le programme à utiliser pour ouvrir sass.js :?
En fait phpStorm m'avait proposé son watcher que j'aurais dû accepter plutôt que de skipper. Ne serait-ce pas plus judicieux dans mon cas d'utiliser le watcher de phpStorm ? Y-a-t-il par hasard un tuto là-dessus ?

7 réponses

juanpa
Auteur
Réponse acceptée

j'ai résolu partiellement le problème, dans le sens ou les commandes sass fonctionnent, mais pas les commandes gulp ... pffff windows
j'ai installé en fait RailInstaller et après j'ai installé les gems saas et compass.
Pour gulp je suis obligé de taper :

node ./node-modules/gulp/bin/gulp -v

pour afficher la version

Grafikart

Normalement tu devrais écrire

sass --watch fichier.scss:fichier_sortir.css

Je ne comprends pas trop pourquoi tu écris sass:css

juanpa
Auteur

Salut !

Bon me suis refais le tuto de A à Z comme chez Allianz !
Tout marche nickel jusqu'à la partie la plus importante : l'automatisation via gulp
sass et compass fonctionne, j'ai bien installé gulp via npm en global et local mais pourtant qand je lance la commande gulp ça m'ouvre sublimeText avec le fichier ...\AppData\roaming......\node-modules\gulp\bin\gulp.js

Comme si la variable d"environnement n'était ps fixée. Donc je rajoute cette ligne dans la variable d'environnement PATH mais après avoir redémarrer la console c'est toujours pareil... c'est balot !

nico41

gulp-cli en global et gulp en local
npm install -g gulp-cli
npm install --save-dev gulp

juanpa
Auteur

Super merci Nico ;)

D'abord ça n'a pas marché, puis j'ai nettoyé mon dossier modules à coup de npm rm gulp et gulp-cli.
Ensuite installé comme tu as préconisé et sa marche, voilà une bonnechose de faite.

J'ai juste encore un soucis avec une erreur sur l'assets. J'ai beau retouner la docs dans tous les sens;, je vois l'erreur au bout de mon nez :s
J'ai vérifier l'import de useref, désinstaller réinstaller... 

 Finished 'compass' after 1.54 s
[00:34:00] Starting 'default'...
[00:34:00] 'default' errored after 304 μs
[00:34:00] TypeError: useref.assets is not a function
    useref = require('gulp-useref');

gulp.task('default', ['process-js','compass', 'clean'], function () {

    var assets = useref.assets();

     gulp.src('src/images/**/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/img'));

    return gulp.src('src/*.html')
        .pipe(assets)
        .pipe(jsFilter)
        .pipe(uglify())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(minifyCss)
        .pipe(cssFilter.restore())
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));

});
nico41

voir la doc de gulp-useref : https://www.npmjs.com/package/gulp-useref
Ton problème est expliqué en fin de cette page

juanpa
Auteur

C'est le premier endroit où je suis aller jeter un oeil... mais sans doute pas le bon ^^ :D