SCSS to CSS with Gulp.JS – Convert CSCC file to CSS

When you just want to use SCSS in your project you dont need to install big tools like webpack, with gulp you can easily convert scss files into css file with little bit of code and settings.

First of all you should install gulp and scss loaders and converter npm packages

npm install gulp gulp-sass node-sass gulp-clean-css gulp-concat

After installing those npm packages you should create a gulpfile.js file like this

Example gulpfile.js

<?php

// npm install gulp gulp-sass node-sass gulp-clean-css gulp-concat

var gulp = require('gulp'),
    sass = require('gulp-sass')(require("node-sass")),
    cleanCSS = require('gulp-clean-css'),
    concat = require('gulp-concat');

gulp.task('scss-concat', function () {
    return gulp.src([
        'assets/scss/reset.scss',
        'assets/scss/parts/*.scss',
        'assets/scss/main.scss',
        'assets/scss/mobile-md.scss',
        'assets/scss/mobile-sm.scss',
        'assets/scss/mobile-xs.scss'
    ])
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('bundle.css'))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('assets/css'));
});

gulp.task('watch', function () {
    gulp.watch('assets/scss/parts/*.scss', gulp.series('scss-concat'));
    gulp.watch('assets/scss/*.scss', gulp.series('scss-concat'));
});

Important : You should change scss file and css file folders to your folder names to convert successfully.

This system very usefull and easy to use. You just need to create assets/scss folders and you need to create your scss files as you can see in the gulpfile.js after that you just need to run this commend in your project directory command line to start watching your files.

With this command gulp will watch all file changes and will minify and combine and convert into bundled css file.

gulp watch

Full Project Ready to use SCSS and GULP starter pack : https://github.com/gokhancelebi/gulp-scss-starter-project

In this version of gulp file configuration you will find your css files in /assets/css/bundle.css