Gulp を使用して、sass を css にコンパイルしています。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'