Gulp-sass won't compile scss files to css instead copy all files from scss folder to css folder

Question

Hello i am pretty new to a gulp. The problem is when i run default task with command "gulp" scss files dont compile instead copy to css folder This is my gulpfile.js

 var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var browserSync = require('browser-sync'); var runSequence = require('run-sequence'); gulp.task('browserSync', function() { browserSync({ server: { baseDir: 'app' } }) }) gulp.task('sass', function() { return gulp.src('app/scss/**/*.scss') .pipe(autoprefixer({ browsers: ['last 2 versions'] })) .pipe(gulp.dest('app/css')) .pipe(browserSync.reload({ stream: true })); }) gulp.task('watch', function() { gulp.watch('app/scss/**/*.scss', ['sass']); gulp.watch('app/*.html', browserSync.reload); gulp.watch('app/js/**/*.js', browserSync.reload); }) gulp.task('default', function(callback) { runSequence(['sass', 'browserSync', 'watch'], callback ) })

directory tree

 app |-scss |- styles.scss |- _layout.scss |- _homepage.scss |- _profile.scss |- _contact.scss |-css

in styles.scss i have :

 $orange: #f29528; $image: "../images/"; @import 'layout'; @import 'homepage'; @import 'profile'; @import 'contact';

I see you required gulp-sass as sass, but I don't see you actually using it. — Josef Engelfrost
– Josef Engelfrost, Commented Nov 11, 2015 at 0:02

mydo47 · Accepted Answer · 2015-11-11 16:08:40Z

You don't use sass() . Try :

gulp.task('sass', function() { return gulp.src('app/scss/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(autoprefixer({ browsers: ['last 2 versions'] })) .pipe(gulp.dest('app/css')) .pipe(browserSync.reload({ stream: true })); })

Read more gulp-sass

user4923217 · Accepted Answer · 2017-07-09 22:37:10Z

I'm using this as my projects task handler with the files.scss and works just fine for me ATM. I hope it works for you as well.

'use strict' // @requesting packages const gulp = require('gulp'); const sass = require('gulp-sass'); const autoprefixer = require('gulp-autoprefixer'); const sourcemaps = require('gulp-sourcemaps'); const cleancss = require('gulp-clean-css'); // @gulp task gulp.task('sass', () => gulp.src('./scss/**/*.scss') .pipe(sass({ outputStyle: 'nested', sourceComments: false })) // *** The debug function isn't needed you can delete it if you want .pipe(cleancss({debug: true}, function(details) { console.log(details.name + ': ' + details.stats.originalSize); console.log(details.name + ': ' + details.stats.minifiedSize); })) .pipe(autoprefixer({ versions: ['last 2 browsers'] })) .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('./css')) ); // @gulp watch task gulp.task('default', () => { gulp.watch('./scss/*.scss', ['sass']); });

Remember to change the path of the directories in the sass route.

Collectives™ on Stack Overflow

Gulp-sass won't compile scss files to css instead copy all files from scss folder to css folder

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related