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

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

如果使用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" } 
  1. 在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']); }) 
  1. 现在打开“Task Runner Explorer”,双击任务:“watch-sass” 任务运行资源管理器

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

这也可以通过简单地在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文件上运行完全相同的编译器。

Web编译器扩展VS2015

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

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

编辑:

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

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

WebCompiler(免费)

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

下载Web编译器


CompileSASS(免费)

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

下载编译SASS


Web Workbench(免费/付费)

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

下载Web WorkBench

这个问题的大部分步骤与“小牛” 在这篇文章中给出的步骤相同,这些步骤涉及如何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并重新打开项目。 看起来你必须在每次开始观看项目时都运行(双击)“观看”(在“任务”下),然后在随后的保存中运行。