web-dev-qa-db-ja.com

Gulp-sassがscssファイルのコンパイルに失敗する

私はsulpをcssにコンパイルするためにGulpを使用しています。単純なタスクは、style.scssディレクトリの_/sassファイルをコンパイルし、出力をプロジェクトのルートに保存します。 style.scssは、_/sassディレクトリ内の他のファイルをインポートするためだけに使用されます。

コマンドライン（$ gulp）からデフォルトタスクを実行すると、sassがコンパイルできないというエラーが表示されます。以下に完全に含まれています。含まれているファイルからすべてのコンテンツを削除して、タスクを再度実行しました。それでも同じエラーが表示されます（オンラインで読んだところ、これがエンコーディングの問題をテストしている可能性があることを示唆しました。エンコーディングと、シナリオで問題が発生する可能性があることを完全に理解していません）。

また、コマンドライン$ sass _/sass/style.scss style.cssから実行しました。これは、インクルードファイルのコンテンツを完全に処理します。これは、gulp sassプラグイン自体に問題があることを示唆しています。

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');
  })
});

Style.scssの完全な内容：

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

ディレクトリ構造：

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

端末が吐き出す：

[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

インポートをそのままにして、gulp sassモジュールのincludePathsオプションを引数として渡すだけです。

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

...あなたのためにそれをすべきです。

に従ってhttps://github.com/dlmanning/gulp-sass/issues/1

16
Dog

WindowsでSublimeテキストを使用する場合は、Sunlime構成にルールを追加する必要があります。 Preferences> Settings-Userに"atomic_save" : trueを追加するだけです

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

0
Alexander Shchegol

このため、同じgulpfile.jsフォルダーから開始する必要があります

@import '_/sass/reset'

Gulpはインポートを読み取り、gulpfile.jsが配置されている場所からファイルを見つけると思います

0
max li