基本的なことですいません。
scssディレクトリに「*.scss」と「style.scss」があり、
「style.scss」に「*.scss」をインポートさせています。
「style.scss」を編集し、保存すると正常にコンパイルされるのですが、
「*.scss」を編集し、保存するとコンパイルされません。
ですが、再び「style.scss」を編集し、保存すると「*.scss」の編集した箇所もコンパイルされています。
「_*.scss」を編集し保存した時にもコンパイルされるようにするにはどうしたら良いでしょうか?
該当のソースコード
var gulp = require('gulp'); var cache = require('gulp-cached'); //変更のあったもの(scss) var plumber = require('gulp-plumber'); //watch中にエラー防止 var csscomb = require('gulp-csscomb'); //cssプロパティ順序 var sass = require('gulp-sass');//cssコンパイル var postcss = require('gulp-postcss'); //autoprefixerとセット var autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与 var cssdeclsort = require('css-declaration-sorter'); //css並べ替え var gcmq = require('gulp-group-css-media-queries'); //CSSメディアクエリー整理 var notify = require('gulp-notify'); //エラーを通知 var browserSync = require('browser-sync'); //ブラウザ反映 /// cssコンパイル //////////////////////////////////////////// // scssのコンパイル gulp.task('sass', function () { return gulp.src('scss/*scss') .pipe(cache('sass')) .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))//エラーチェック .pipe(sass({ outputStyle: 'expanded' //expanded, nested, campact, compressedから選択 })) .pipe(postcss([autoprefixer( { // ☆IEは11以上、Androidは4.4以上 // その他は最新2バージョンで必要なベンダープレフィックスを付与する browsers: ["last 2 versions", "ie >= 11", "Android >= 4"], cascade: false } )])) .pipe(postcss([cssdeclsort({ order: 'smacss' })]))//プロパティをソートし直す(アルファベット順) .pipe(gcmq()) .pipe(gulp.dest('./'))//コンパイル後の出力先 .pipe(notify({ title: 'Sassをコンパイルしました。', message: new Date(), sound: 'Tink' })); }); gulp.task('bs-reload', function (done) { browserSync.reload(); done(); }); // 保存時のリロード gulp.task('browser-sync', function (done) { browserSync.init({ //ローカル開発 server: { baseDir: "./" } }); done(); }); gulp.task('bs-reload', function (done) { browserSync.reload(); done(); }); // 監視 gulp.task('watch', function (done) { gulp.watch('../*/*.html', gulp.task('bs-reload')); gulp.watch('scss/*.scss', gulp.task('sass')); //sassが更新されたらgulp sassを実行 gulp.watch('scss/*.scss', gulp.task('bs-reload')); //sassが更新されたらbs-reloadを実行 gulp.watch('../**/*.css', gulp.task('bs-reload')); //cssが更新されたらbs-reloadを実行 gulp.watch('js/*.js', gulp.task('bs-reload')); //jsが更新されたらbs-relaodを実行 }); // default gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch')));
試したこと
「_*.scss」はcssファイルにコンパイルしたくないので、アンダーバーをつけています。
アンダーバーをつけずに試したところ結果は同じでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/30 00:16