Gulp.js CSS任务异常：Foundation与自定义SCSS合并失败求助

Hey there, let’s dig into why your custom SCSS isn’t showing up in the final CSS file even though Gulp’s not throwing errors. I’ve run into similar headaches with Foundation and Gulp before, so here are the most likely fixes to check step by step:

First, make sure your entry SCSS file is properly pulling in both Foundation and your custom styles. The order matters a lot here—you want to override Foundation defaults after importing its core. A correct structure should look something like this:

// 1. Optional: Import your custom Foundation variable overrides first
@import 'path/to/your/foundation-settings';

// 2. Import Foundation's SCSS core (not the precompiled CSS!)
@import 'foundation-sites/scss/foundation';

// 3. Initialize Foundation's components (adjust this if you don't need everything)
@include foundation-everything();

// 4. Finally, import your custom styles (this ensures they take priority)
@import 'path/to/your/custom-styles';

If you forgot to explicitly import your custom SCSS files in main.scss, Gulp won’t magically pick them up. Also double-check file paths—typos here won’t trigger Gulp errors, but Sass will silently skip missing files.

Make sure your Gulp task is set up to resolve Foundation’s SCSS paths and compile from your main.scss entry point (not just copy Foundation’s precompiled CSS). Here’s a correct example using gulp-sass:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const foundationPaths = require('foundation-sites').includePaths;

function compileCSS() {
  return gulp.src('src/main.scss') // Start with your entry SCSS file
    .pipe(sass({
      includePaths: foundationPaths // Let Sass find Foundation's SCSS files
    }).on('error', sass.logError))
    .pipe(gulp.dest('dist')); // Output to your dist folder
}

exports.css = compileCSS;

If your task was directly copying Foundation’s precompiled foundation.css instead of compiling from main.scss, your custom styles would never get merged in.

Sometimes Gulp’s cached files or misconfigured watchers can prevent updates from showing up:

• Manually delete dist/main.css, then re-run your Gulp task from scratch. If your custom styles appear now, caching was the culprit.
• If you’re using gulp-watch, confirm the watcher includes your custom SCSS files. For example:

  function watchFiles() {
    gulp.watch(['src/**/*.scss'], compileCSS); // Watch all SCSS files in src
  }
  

Even if Gulp doesn’t throw an error, invalid SCSS syntax (like unclosed brackets, invalid variable names, or broken mixins) can cause Sass to ignore entire sections of code. Test your custom SCSS in isolation to rule this out:

# Compile your custom file directly with Sass CLI
sass src/custom-styles.scss test-output.css

If test-output.css is empty or missing content, you’ve got a syntax issue in your custom SCSS that Gulp’s error handler didn’t catch.

If you accidentally imported Foundation’s precompiled foundation.css instead of its SCSS source files, Sass will treat it as plain text and won’t process subsequent custom styles correctly. Always import from foundation-sites/scss/foundation, not foundation-sites/dist/css/foundation.css.

内容的提问来源于stack exchange，提问作者tmette