Question

我在基础网站NPM和我自己的SCSS中结合CSS时遇到了问题。由于某种原因，生成的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文件的底部。任何人都可以对此有所了解吗？

Answer 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 }))
});

我的gulp.js CSS任务无法正常工作，我无法弄清楚原因

1 个答案: