如何在Visual Studio 2015中保存时编译.sass文件

Question

如何在Visual Studio 2015中启动并运行完整的sass(即scss)预编译器环境？这是一个关于此问题的兄弟问题.

Answer 1

只需在Visual Studio中单击您的方式,也可以无需gulp或grunt即可实现.

安装Web编译器

1. 在Visual Studio中,按工具 - >扩展和更新.
2. 搜索Web编译器(由Mads Kristensen创建)并安装.
3. 将需要重新启动Visual Studio.

编译文件

1. 在解决方案资源管理器中右键单击.scss文件以设置编译.
2. 按Web编译器 - >编译文件(Shift + Alt + Q).

在项目的根目录中创建名为compilerconfig.json的文件,您可以在其中修改编译器的行为.右键单击compilerconfig.json文件,您可以轻松运行所有已配置的编译器.

只要在Visual Studio中修改.scssfile,编译器就会自动运行以生成编译的输出文件.

在Build上编译

1. 右键单击compilerconfig.json文件
2. 按Web编译器 - >在构建时启用编译
3. 单击该菜单项将提示您输入NuGet包将安装到packages文件夹中的信息,而无需向项目本身添加任何文件.NuGet包中包含一个MSBuild任务,该任务将在项目根目录中的compilerconfig.json文件上运行完全相同的编译器.

Answer 2

如果使用Gulp + Visual Studio 2015

1. 首先安装gulp-sass这是package.json文件

{
      "name": "ASP.NET",
      "version": "0.0.0",
      "devDependencies": {
        "gulp": "3.8.11",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8",
        "gulp-sass": "2.2.0"
      }

2. 在gulpfile.js上

   var sass = require("gulp-sass");
   var paths = {
     webroot: "./wwwroot/"
   }
   paths.scss = paths.webroot + "css/**/*.scss";
   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']);
   })

3. 现在打开"Task Runner Explorer"并双击任务:"watch-sass"

现在每次保存scss时,css都会编译并更改sass文件.

Answer 3

VS2015的Web编译器扩展

Gulp是必需的.npm install -g gulp

希望这有助于减少几个环节.

编辑:

我遇到了Web编译器将字符串转换为Unicode字符的问题,而不应该这样做.我在VS2015中切换到了这个实现 http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/,它正在正确地编译CSS.添加以防其他人遇到相同的问题.

Answer 4

如果您不想弄乱手动设置编译的复杂性,可以使用许多非常简单的扩展来为您处理:

WebCompiler(免费)

它已被提及,但Mads Kristensen(web essentials的作者)创建了一个名为Web Compiler的独立编译工具.您所要做的就是安装它,然后右键单击要编译的任何SASS文件,并选择Web Compiler> Compile File.从那时起,它被观察,并且无论何时保存,文件都将被编译.

下载Web编译器

CompileSASS(免费)

与Web Compiler类似,这是一个独立的扩展,可以在VS2013和VS2015中使用,因为编译已从流行的Web Essentials扩展中删除.它非常轻巧,可以很好地完成错误报告.在此处阅读作者关于扩展程序的博客.

下载编译SASS

Web Workbench(免费/付费)

Mindscape的Web Workbench在编译SASS时多年来一直是我最喜欢的扩展,但后来我转而支持免费替代品.尽管如此,Pro版本是一个功能强大的工具,有许多方法可以自定义输出文件,但考虑到有免费工具,它也非常昂贵(39美元).

下载Web WorkBench