I am running my gulp task for compiling my scss files and then convert them to css. The scss files are getting compiled correctly in the cli. But the css files are not getting saved. Below is my scss folder structure:

public/
|--scss/
    |-- components/
        |-- _buttons.scss
    |-- config/
        |-- _extend.scss
        |-- _fantasy-icons.scss
        |-- _fonts.scss
        |-- _index.scss
        |-- _keyframes.scss
        |-- _mixins.scss
        |-- _proj-common.scss
        |-- _typography.scss
        |-- _variables-color.scss
        |-- _variables-en.scss
        |-- _variables.scss
    |-- pages/
        |-- homepage.scss
        |-- header.scss
    |-- _overlays.scss
    |-- _fonts-charts.scss
    |-- client-chart-2025.scss
    |-- client-styling.scss
    |-- client-main-2025.scss
    |-- client-fonts.scss

Below is the gulp task that I am running:

gulp.task("sass", function () {
  return (
    gulp
      .src("/public/sass/**/*.scss")
      .pipe(header(`$imgPath: "${imgPath}";`))
      .pipe(
        sass({
          outputStyle: "expanded",
        }).on("error", sass.logError)
      )
      .pipe(sourcemaps.init())
      .pipe(dartsass())
      // .pipe(gcmq())
      .pipe(cleanCSS())
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("/public/css"))
  );
});

Can anyone help what is the exact issue here? My scss files are getting compiled and I get a confirmation in my cli whenever I change anything in the scss files. Please check the image below for reference:

I am running my gulp task for compiling my scss files and then convert them to css. The scss files are getting compiled correctly in the cli. But the css files are not getting saved. Below is my scss folder structure:

public/
|--scss/
    |-- components/
        |-- _buttons.scss
    |-- config/
        |-- _extend.scss
        |-- _fantasy-icons.scss
        |-- _fonts.scss
        |-- _index.scss
        |-- _keyframes.scss
        |-- _mixins.scss
        |-- _proj-common.scss
        |-- _typography.scss
        |-- _variables-color.scss
        |-- _variables-en.scss
        |-- _variables.scss
    |-- pages/
        |-- homepage.scss
        |-- header.scss
    |-- _overlays.scss
    |-- _fonts-charts.scss
    |-- client-chart-2025.scss
    |-- client-styling.scss
    |-- client-main-2025.scss
    |-- client-fonts.scss

Below is the gulp task that I am running:

gulp.task("sass", function () {
  return (
    gulp
      .src("/public/sass/**/*.scss")
      .pipe(header(`$imgPath: "${imgPath}";`))
      .pipe(
        sass({
          outputStyle: "expanded",
        }).on("error", sass.logError)
      )
      .pipe(sourcemaps.init())
      .pipe(dartsass())
      // .pipe(gcmq())
      .pipe(cleanCSS())
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("/public/css"))
  );
});

Can anyone help what is the exact issue here? My scss files are getting compiled and I get a confirmation in my cli whenever I change anything in the scss files. Please check the image below for reference:

• css
• sass
• gulp

1 Answer 1

Seems like you are using absolute path in gulp task. Instead use relative path

gulp.task("sass", function () {
  return gulp
    .src("public/scss/**/*.scss") // // fixed path to relative
    .pipe(sourcemaps.init())
    .pipe(header(`$imgPath: "${imgPath}";`))
    .pipe(
      sass({
        outputStyle: "expanded",
      }).on("error", sass.logError)
    )
    .pipe(cleanCSS())
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("public/css")); // fixed path to relative
});

also use a single compiler to compile your sass