私は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'
インポートをそのままにして、gulp sassモジュールのincludePaths
オプションを引数として渡すだけです。
gulp.src('./_/sass/style.scss')
.pipe(sass({ includePaths : ['_/sass/'] }))
.pipe(gulp.dest('./'));
...あなたのためにそれをすべきです。
WindowsでSublimeテキストを使用する場合は、Sunlime構成にルールを追加する必要があります。 Preferences> Settings-Userに"atomic_save" : true
を追加するだけです
このため、同じgulpfile.jsフォルダーから開始する必要があります
@import '_/sass/reset'
Gulpはインポートを読み取り、gulpfile.jsが配置されている場所からファイルを見つけると思います