gulp.js – sass to css

Step 1: Create MVC 6 Core Project

GulpExample

Step 2: Create a SASS Folder and File

wwwroot = >  Create a new Folder (sass) = > create new sass file “style.scss” and create folder css.

$bgColor:#cccccc;

body{
 background-color:$bgColor;
}

Step 3: Create Gulp Folder

Add NewFolder => Gulp

Step 4: Configure Your Project

Open cmd and move to working directory i.e Gulp Folder to generate package.json configuration.

npm init

Step 5: Install Gulp Locally

npm install gulp --save-dev

npm install gulp-sass --save-dev

This command will create the node_modules folder consist of all the npm Library.

Step 6: Create a Gulp Configuration File

Create gulpfile.js

let gulp = require('gulp');
let sass = require("gulp-sass");


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

Step 7: Run the Task in cmd.

Open cmd and move to working directory i.e Gulp Folder

gulp sass;

Step 8: Files are created.