web-dev-qa-db-fra.com

Gulp-sass ne parvient pas à compiler le fichier scss

J'utilise Gulp pour compiler mon sass en css. Une tâche simple compile le fichier style.scss dans le répertoire _/sass et enregistre le résultat à la racine du projet. style.scss sert uniquement à importer d'autres fichiers du répertoire _/sass.

Lorsque j'exécute la tâche par défaut à partir de la ligne de commande ($ gulp), j'obtiens une erreur impossible à compiler par sass. Il est inclus ci-dessous dans son intégralité. J'ai supprimé tout le contenu des fichiers inclus et relance la tâche. Je reçois toujours la même erreur (quelque chose que j'ai lu en ligne suggérait que cela pourrait permettre de détecter un problème d'encodage. Je ne comprends pas tout à fait l'encodage et comment cela pourrait casser des choses dans mon scénario).

J'ai également exécuté à partir de la ligne de commande $ sass _/sass/style.scss style.css qui fonctionne parfaitement avec le contenu des fichiers inclus. Cela me suggère un problème avec le plugin gulp sass lui-même.

Les extraits pertinents de gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');

// Compile sass files
gulp.task('sass', function () {
    gulp.src('./_/sass/style.scss')
        .pipe(sass())
        .pipe(gulp.dest('./'));
});

// The default task (called when you run `gulp`)
gulp.task('default', function() {
  gulp.run('sass');

  // Watch files and run tasks if they change

  gulp.watch(['./_/sass/style.scss'], function() {
    gulp.run('sass');
  })
});

Le contenu complet de style.scss:

/* RESET */
@import '_/sass/reset';
/* TYPOGRAPHY */
@import '_/sass/typography';
/* MOBILE */
@import '_/sass/mobile';
/* MAIN */
@import '_/sass/main';

La structure du répertoire:

├── _
│   ├── inc
│   │   ├── stuff
│   ├── js
│   │   ├── otherstuff.js
│   └── sass
│       ├── main.scss
│       ├── mobile.scss
│       ├── print.scss
│       ├── reset.scss
│       ├── style.scss
│       └── typography.scss
├── gulpfile.js
└── style.css

Le terminal crache:

[gulp] Using file /Users/jeshuamaxey/project/dir/path/gulpfile.js
[gulp] Working directory changed to /Users/jeshuamaxey/project/dir/path/html5reset
[gulp] Running 'default'...
[gulp] Running 'sass'...
[gulp] Finished 'sass' in 3.18 ms
[gulp] Finished 'default' in 8.09 ms

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
source string:11: error: file to import not found or unreadable: 'reset'
csssassgulp
12
Jeshua

Conservez vos importations en l'état, passez simplement l'option includePaths dans votre module gulp sass en tant qu'argument:

gulp.src('./_/sass/style.scss')
        .pipe(sass({ includePaths : ['_/sass/'] }))
        .pipe(gulp.dest('./'));

... devrait le faire pour vous. 

Selon https://github.com/dlmanning/gulp-sass/issues/1

16
Rob

Si vous utilisez du texte Sublime avec Windows, vous devez ajouter des règles dans Sunlime config. Ajoutez simplement "atomic_save" : true dans Préférences> Paramètres-Utilisateur

https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes#partials-sporadically-not-found

0
Alexander Shchegol

Pour cela, vous devez commencer par le même dossier gulpfile.js

@import '_/sass/reset'

Je pense que le Gulp lit l'importation et trouve le fichier d'où gulpfile.js se trouve

0
max li