sass - My SCSS files are not getting saved in css folder with Gulp - Stack Overflow

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

Share Improve this question Follow asked Jan 30 at 3:39 Shreyas VaidyaShreyas Vaidya 3566 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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