[英]My gulp.js CSS task isn't working correctly and I can't figure out why
我在將Foundation Sites NPM的CSS和我自己的SCSS結合在一起時遇到問題。 由於某種原因,生成的CSS文件包含所有Foundation CSS,但不會從我的SASS文件中添加任何內容。
這是我的CSS任務(帶有變量):
var CSS_SOURCE = 'assets/src/scss';
var CSS_DEST = 'assets/dist/css';
var CSS_OUTPUT_FILE = 'main.css';
gulp.task('css', function() {
gulp.src([
'node_modules/foundation-sites/dist/css/foundation.css',
CSS_SOURCE + 'main.scss'
])
.pipe(plumber({
errorHandler: function(error) {
console.log(error.message);
}}))
.pipe(concat(CSS_OUTPUT_FILE))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest(CSS_DEST + '/'))
.pipe(rename({suffix: '.min'}))
.pipe(cleanCSS())
.pipe(gulp.dest(CSS_DEST + '/'))
.pipe(browserSync.reload({ stream:true }))
});
這是我的main.scss文件:
@import "custom-settings";
@import "typography";
@import "header";
@import "navigation";
@import "buttons";
@import "main-content";
@import "footer";
Gulp不會記錄任何錯誤。 無論我在單個SASS文件中放什么內容,都不會將其添加到/dist/main.css文件的底部。 誰能對此有所啟發?
找到答案后,我需要在main.scss文件中包含導入的路徑。 我還需要在gulp.src中添加一個額外的正斜杠。 這是工作任務:
gulp.task('css', function() {
gulp.src([
'node_modules/foundation-sites/dist/css/foundation.css',
CSS_SOURCE + '/main.scss'
])
.pipe(plumber({
errorHandler: function(error) {
console.log(error.message);
}}))
.pipe(sass({
includePaths: [
CSS_SOURCE
]
}))
.pipe(concat(CSS_OUTPUT_FILE))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest(CSS_DEST + '/'))
.pipe(rename({suffix: '.min'}))
.pipe(cleanCSS())
.pipe(gulp.dest(CSS_DEST + '/'))
.pipe(browserSync.reload({ stream:true }))
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.