CODEWITHSUNDEEP
csssassgulp
Shreyas Vaidya
Shreyas Vaidya

Reputation: 25

My SCSS files are not getting saved in css folder with Gulp

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: enter image description here

Upvotes: 0

Views: 28

Answers (1)

Shahnewaz Tameem
Shahnewaz Tameem

Reputation: 19

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

Upvotes: 0

Related Questions