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

Question

如何在 Visual Studio 2015 年获得完整的 sass（即 scss）预编译器环境和运行？这是的同级问题。

Answer 1

回答这个问题的大部分步骤与 'Maverick' 给出的步骤相同，后者涉及如何以更少的成本做同样的事情。但是，有人不允许我更改该问题以简单地包括 sass （这可能是最好的，我不知道）。因此，以下答案依赖于 Maverick 在上面 post 中指定的步骤，但存在以下差异：

（空项目的前步骤） 如果你从一个空项目开始，首先添加 G运行t 和 Bower:

Right click solution -> Add -> 'Grunt and Bower to Project' (then wait for a minute for it to all install)

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）

然后：

Dependencies -> right-click NPM -> Restore Packages.

gruntfile.js

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

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

2) 再次在 gruntfile.js 中，添加初始化配置，如下所示。

{ 警告：我不是此类配置方面的专家。前段时间在一个优秀的博客post上找到了sass的配置，现在找不到了，求指点。关键是我想在项目中的某个文件夹（加上后代）中找到 all 文件。以下是这样做的（注意 "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 的说明进行操作。确保关闭并重新打开项目。似乎每次启动项目时都必须运行（双击）'watch'（在'Tasks'下）才能让手表观看，但随后的保存就可以了。

Answer 2

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 3

如果您不想搞乱手动设置编译的复杂性，有许多非常简单的扩展可以为您处理：

网络编译器（免费）

已经提到过，但 Mads Kristensen（web essentials 的作者）创建了一个名为 Web Compiler 的独立编译工具。您所要做的就是安装它，然后右键单击要编译的任何 SASS 文件和 select Web Compiler > Compile File。从那时起，它就会被观看并在任何时候保存，文件都会被编译。

Download Web Compiler

编译SASS（免费）

与 Web Compiler 类似，这是一个独立的扩展，可以在 VS2013 和 VS2015 中使用，因为编译已从流行的 Web Essentials 扩展。它很轻巧，并且通过出色的错误报告可以很好地完成工作。阅读作者关于扩展 here.

的博客

Download Compile SASS

网络 Workbench (FREE/PAID)

Mindscape's Web Workbench 多年来一直是我在编译 SASS 时最喜欢的扩展，但后来我转而使用免费的替代品。尽管如此，专业版仍然是一个强大的工具，可以通过多种方式自定义输出文件，但考虑到那里有免费工具，它也相当昂贵（39 美元）。

Download Web WorkBench

Answer 4

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

这也可以在没有 gulp 或 g运行t 的情况下实现，只需在 Visual Studio 中单击您的方式即可。

安装网络编译器

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

编译文件

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

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

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

构建时编译

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

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

How to compile .sass files on save in Visual Studio 2015

asp.net

sass

gruntjs

visual-studio-2015