0
@importsの変更をメインのSCSSファイルの変更とともにコンパイルしようとしていて、基本的にこれを動作させています。Gulp Sassは2つのセーブでのみコンパイルする
私の設定に関する問題:変更を確認するには、ファイルをメインファイルかインポートファイルかにかかわらず2回保存する必要があります。これに関するアイデアは非常に高く評価されています。
ディレクトリ構造が単純である:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sync = require('browser-sync').create(); // create a browser sync instance.
var sassPaths = [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
var paths = {
'assets': 'assets',
'dev': 'assets/styles/dev'
};
// DEV CSS
gulp.task('dev-styles', function() {
return gulp.src(['scss/**/*.scss', 'scss/*.scss'])
.pipe($.sass({
includePaths: sassPaths,
outputStyles: 'expanded'
})
.on('error', $.sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >=9']
}))
.pipe(rename({
suffix: '.dev'
}))
.pipe(gulp.dest('paths.dev'));
});
// DEFAULT WATCH
gulp.task('default', function() {
sync.init({
injectChanges: true,
proxy: 'localhost/basic-modx'
});
\t
\t gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ], ['dev-styles']);
gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ]).on('change', sync.reload);
});
- - > SCSS
> SCSS /パーシャルはここ
は私gulpfileの関連する部分です
ありがとうございました - この問題が発生し、この設定の不一致が見えたが、いくつかのプロジェクトで問題なく使用されたときにbrowserSyncのドキュメントをチェックしました。とにかく、gulpfileがドキュメントに従うようになりました(!)、すべてうまくいきます。再度、感謝します。 – jivers