Development (.sass) in visual studio 2017

Question

I am just starting to use VS 2017, and I usually write .sass, but it turns out that VS only recognizes .scss files, is there a way to make VS recognize .sass files ??

Answer 1

There are (free) extensions available for Visual Studio 2017

One of them is a web compiler: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler

You can install it in Visual Studio IDE

Visual Studio menu options to get the extension:

Installation:

Update 1: support for compiling the .sass extension

The web compiler does not support the old ".sass" format. To compile ".sass" you must use gulp -sass

The following is the setup procedure:

• 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. Install sass-task and run it

6. Add your .sass file to the view folder

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