CODEWITHSUNDEEP
htmlcsssassgulp
Owaiz Yusufi
Owaiz Yusufi

Reputation: 918

Gulp is not compiling SCSS to CSS

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.

  1. I am currently not working on my localhost. I have made the project file on my desktop.

  2. 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.

Upvotes: 5

Views: 9086

Answers (3)

lukeocom
lukeocom

Reputation: 3243

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'))
});

Upvotes: 1

Waseef
Waseef

Reputation: 11

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.

Upvotes: 1

D-Money
D-Money

Reputation: 2465

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'));

Upvotes: 1

Related Questions