安装Web编译器

Question

如何在Visual Studio 2015中启动并运行完整的sass（即scss）预编译器环境？这是this one concerning less的兄弟问题。

Answer 1

只需在Visual Studio中单击您的方式，即可完成此操作，无需gulp或grunt。

安装Web编译器

在Visual Studio中，按工具 - ＆gt;扩展和更新。
搜索Web编译器（由Mads Kristensen创建）并安装。
将需要重新启动Visual Studio。

编译文件

右键单击解决方案资源管理器中的.scss文件以设置编译。
按Web编译器 - ＆gt;编译文件（Shift + Alt + Q）。

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

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

在Build

右键单击compilerconfig.json文件
按Web编译器 - ＆gt;在构建
单击该菜单项将提示您将有关NuGet包安装到packages文件夹中的信息，而不向项目本身添加任何文件。 NuGet包中包含一个MSBuild任务，该任务将在项目根目录中的compilerconfig.json文件上运行完全相同的编译器。

Answer 2

如果使用Gulp + Visual Studio 2015

首先安装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"
      }

关于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']);
   })

现在打开“Task Runner Explorer”并双击任务：“watch-sass”

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

Answer 3

Web Compiler Extension for VS2015

需要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＆gt;编译文件。从那时起，它被观察，并且无论何时保存，文件都将被编译。

<强> Download Web Compiler

CompileSASS（免费）

与Web Compiler类似，这是一个独立的扩展程序，可以在 VS2013 和 VS2015 中使用，因为已从流行的Web Essentials扩展程序中删除了编译。它具有轻量级功能，可以很好地完成错误报告。阅读作者关于扩展程序here的博客。

<强> Download Compile SASS

Web Workbench（FREE / PAID）

编译SASS多年来，

Mindscape's Web Workbench是我最喜欢的扩展，但后来我转而支持免费替代方案。尽管如此，Pro版本是一个功能强大的工具，有许多方法可以自定义输出文件，但考虑到有免费工具，它也非常昂贵（39美元）。

<强> Download Web WorkBench

Answer 5

回答这个问题的大多数步骤都与“Maverick＆＃39; on this post关注如何以更少的方式做同样的事情。然而，有人不允许我改变这个问题只是包括sass（这可能是最好的，我不知道）。因此，以下答案依赖于Maverick在上述帖子中指定的步骤，具有以下差异：

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

右键点击解决方案 - ＆gt;添加 - ＆gt; ＆＃39; Grunt和Bower to Project＆＃39; （然后等待一分钟让它全部安装）

<强> 的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"
}

（仅供参考：grunt-contrib-sass link）

然后：

依赖关系 - ＆gt;右键单击NPM - ＆gt;恢复包。

<强> gruntfile.js

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

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

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

{警告：我不是这种配置的专家。我前段时间在一篇优秀的博客文章中找到了sass配置，我现在无法找到它以获得荣誉。关键是我想在某个文件夹（加上后代）中找到项目中的所有文件。以下内容（注意"someSourceFolder/**/*.scss"和see important related note here）。 }

// ... 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
        }
    }
}

现在按照其他答案中给出的Task Runner Explorer的说明进行操作。确保关闭并重新打开项目。看来你必须跑（双击）＆＃39;观看＆＃39; （在＆＃39;任务＆＃39;）每次启动项目以观看手表，然后它适用于后续保存。

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

5 个答案:

安装Web编译器

编译文件

在Build

WebCompiler（免费）

CompileSASS（免费）

Web Workbench（FREE / PAID）