Developing (.sass) in visual studio 2017

Question

I'm just starting to use VS 2017 and i usually write .sass but turns out VS only recognise .scss files is there a way make VS recognise .sass files??

Answer 1

There are (free) extensions available for Visual Studio 2017

One of them is Web Compiler : https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler

You can install it inside Visual Studio IDE

Visual Studio Menu option to get extension:

Install:

Update 1: Support to compile ".sass" extension

Web compiler does not support old ".sass" format. To compile ".sass", you have to use gulp-sass

Below is the procedure how to setup:

1. Enable npm (add package.json )

2. Add gulp file

3. Modify package.json to install gulp-sass

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.1.7",
    "gulp-uglify": "^2.1.2",
    "rimraf": "^2.6.1",
    "gulp-sass": "^3.1.0"
  }
}

4. Add SASS task

var sass = require("gulp-sass");
var paths = {
    webroot: "./wwwroot/" /*Set this to your path accordingly*/
}
paths.scss = paths.webroot + "css/**/*.sass"; /*watches sub folders inside wwwroot/css/ */
gulp.task('sass', function () {
    gulp.src(paths.scss)
        .pipe(sass())
        .pipe(gulp.dest(paths.webroot + "css"));
});
gulp.task('watch-sass', function () {
    gulp.watch(paths.scss, ['sass']);
})

5. Setup sass-task and run it

6. Add your .sass file inside the watch folder

7. Whenever you modify your .sass file, .css file will be created