Gulp is not compiling SCSS to CSS

Question

I am new to gulp sass so I am currently learning with this https://css-tricks.com/gulp-for-beginners/. The current topic I am working from the above link is #Preprocessing with Gulp

All the stuff is getting fine until I test my sass file after testing it ( to know that it is compiling the CSS ) I trigger that it is not compiling SCSS to CSS why is it so.

Thinks to know.

I am currently not working on my localhost. I have made the project file on my desktop.
I have created the CSS file manually for the first time to see that my SCSS compiles my Current CSS file

What I am doing wrong.

UPDATE :

Inside my Gulp file :

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task( 'sass', function() {
    return gulp.src('app/scss/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('app/css'));
})

My file structure:

|- app/
      |- css/
      |- fonts/
      |- images/ 
      |- index.html
      |- js/ 
      |- scss/
           |- style.scss
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json

Note: The file Structure is same as in the CSS Trick.

@magreenberg I have updated my answer with my file structure and grunt file code — Owaiz Yusufi
– Owaiz Yusufi, Commented Oct 4, 2017 at 7:54
Do you have any folders in scss? The glob app/scss/**/*.scss is only going to see files with a .scss extension inside a subfolder. — Matt Greenberg
– Matt Greenberg, Commented Oct 4, 2017 at 7:57

D-Money · Accepted Answer · 2017-10-04 09:15:46Z

1

Try adding ./ to your source path:

return gulp.src('./app/scss/**/*.scss')
...

This tells it to start from the current directory, relative to the gulpfile.

Edit - you'll also need the same thing for the destination path:

  .pipe(gulp.dest('./app/css'));

answered Oct 4, 2017 at 9:15

D-Money

2,49517 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Waseef · Accepted Answer · 2017-10-04 13:27:30Z

1

Your gulpfile looks ok. Your folder structure is ok.

I would like to ask wether you installed gulp-sass in your machine.

If you have not install.

Install it npm install gulp-sass --save-dev.

You don't need actually to create css file to test wether it works or not. It's ok if you have created too.

Check and let us know. Thanks.

answered Oct 4, 2017 at 13:27

Waseef

113 bronze badges

Comments

lukeocom · Accepted Answer · 2017-10-09 02:18:44Z

1

you need to remove the semicolon on this line

.pipe(gulp.dest('app/css'));

and add one o the end of the task, like this

gulp.task( 'sass', function() {
    return gulp.src('app/scss/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('app/css'))
});

answered Oct 9, 2017 at 2:18

lukeocom

3,2533 gold badges20 silver badges30 bronze badges

Collectives™ on Stack Overflow

Gulp is not compiling SCSS to CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related