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

在Visual Studio 2015中如何获得完整的sass（即scss）预编译器环境？ 对于这个问题，这是一个兄弟姐妹的问题。

Answer 1

如果使用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 2

这也可以通过简单地在Visual Studio中点击你的方式来实现，而不需要大量的咕噜声或咕噜声。

安装Web编译器

1. 在Visual Studio中，按工具 – >扩展和更新。
2. searchWeb编译器（由Mads Kristensen创build）并安装。
3. 需要重新启动Visual Studio。

编译文件

1. 右键单击解决scheme资源pipe理器中的.scss文件以设置编译。
2. 按Web编译器 – >编译文件（Shift + Alt + Q）。

在项目的根目录中创build一个名为compilerconfig.json的文件，您可以在其中修改编译器的行为。 右键单击compilerconfig.json文件，让您轻松运行所有已configuration的编译器。

任何时候，在Visual Studio中修改.scss文件时，编译器都会自动运行以生成已编译的输出文件。

在Build上编译

1. 用鼠标右键单击compilerconfig.json文件
2. 按Web编译器 – >在编译时启用编译
3. 点击菜单项会提示你一个NuGet软件包将被安装到软件包文件夹中，而不会将任何文件添加到项目本身。 NuGet包中包含一个MSBuild任务，该任务将在项目的根目录下的compilerconfig.json文件上运行完全相同的编译器。

Answer 3

Web编译器扩展VS2015

吞咽是必需的。 npm install -g gulp

希望这有助于…less一些箍。

编辑：

我遇到了一个Web编译器将string转换为Unicode字符时的问题，当它不应该这样做。 我在VS2015切换到这个实现http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/ ，它正在编译CSS。 以防万一遇到同样的问题。

Answer 4

如果您不想陷入手动设置编译的错综复杂的情况，那么可以使用一些非常简单的扩展来处理这个问题：

WebCompiler（免费）

已经有人提到，但是networking必备的作者Mads Kristensen已经创build了一个独立的编译工具，称为Web编译器 。 您只需安装它，然后右键单击要编译的任何SASS文件，然后selectWeb编译器>编译文件。 从这一点开始，它被监视，并且随时保存，文件将被编译。

下载Web编译器

---

CompileSASS（免费）

与Web编译器相似，这是一个独立的扩展，创build后可以在VS2013和VS2015中使用，因为从stream行的Web Essentials扩展中删除了编译。 这是轻量级的，很好的错误报告。 在这里阅读作者的博客有关扩展。

下载编译SASS

---

Web Workbench（免费/付费）

Mindscape的Web Workbench是编译SASS多年以来我最喜欢的扩展，但是后来我转而select了免费的替代scheme。 不过，Pro版本是一个强大的工具，有很多方法来定制输出的文件，但它也相当昂贵（39美元），考虑到有免费的工具。

下载Web WorkBench

Answer 5

这个问题的大部分步骤与“小牛” 在这篇文章中给出的步骤相同，这些步骤涉及如何less做同样的事情。 然而，有人不允许我改变这个问题，只是包括sass（这可能是最好的，我不知道）。 所以下面的答案依赖于Maverick在上面这个post中指定的步骤，有以下不同之处：

（空项目的前置步骤）如果您从一个空项目开始，首先添加Grunt和Bower：

右键点击解决scheme – >添加 – >'Grunt and Bower to Project'（然后等待一分钟就可以完成安装）

的package.json：

 "devDependencies": { "grunt": "^0.4.5", "grunt-bower-task": "^0.4.0", "grunt-contrib-watch": "^0.6.1", "grunt-contrib-sass": "^0.9.2" } 

（FYI： grunt-contrib-sass链接 ）

然后：

依赖项 – >右键点击NPM – >还原包。

gruntfile.js

1）添加或确保这三行注册在底部附近（作为NPM任务）：

 grunt.loadNpmTasks("grunt-bower-task"); grunt.loadNpmTasks("grunt-contrib-watch"); grunt.loadNpmTasks("grunt-contrib-sass"); 

2）再次在gruntfile.js中，添加initconfiguration，如下所示。

{注意：我不是这种configuration的专家。 我在前段时间在一篇出色的博客文章中发现了sassconfiguration，我不能在这个时候find信誉。 关键是我想在某个文件夹（加上后代）内find项目中的所有文件。 下面这样做（注意"someSourceFolder/**/*.scss" ，并在这里看到重要的相关说明 ）。 }

 // ... after bower in grunt.initConfig ... "default": { "files": [ { "expand": true, "src": [ "someSourceFolder/**/*.scss" ], "dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder "ext": ".css" } ] }, "watch": { "sass": { "files": [ "someSourceFolder/**/*.scss" ], "tasks": [ "sass" ], "options": { "livereload": true } } } 

现在按照其他答案中给出的任务运行资源pipe理器的说明。 确保closures并重新打开项目。 看起来你必须在每次开始观看项目时都运行（双击）“观看”（在“任务”下），然后在随后的保存中运行。