我的 gulp.js CSS 任务无法正常工作，我不知道为什么答案

【问题标题】：My gulp.js CSS task isn't working correctly and I can't figure out why我的 gulp.js CSS 任务无法正常工作，我不知道为什么
【发布时间】：2018-02-27 18:35:11
【问题描述】：

我在将 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 文件的底部。任何人都可以对此有所了解吗？

【问题讨论】：

标签： sass gulp frontend gulp-sass

【解决方案1】：

找到了答案，我需要在 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 }))
});

【讨论】：