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

Posted 2023-03-07

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

【英文标题】：How to compile .sass files on save in Visual Studio 2015

【发布时间】：2015-05-07 17:26:36

【问题描述】：

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

【参考方案1】：

这也可以在没有 gulp 或 grunt 的情况下实现，只需在 Visual Studio 中单击即可。

安装网页编译器

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

编译文件

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

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

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

编译时编译

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

【讨论】：

我猜需要将 NuGet 包添加到项目中才能将其集成到自动构建链中，对吧？

我没有得到'Enable compile on build'选项

嗯，我猜是因为我使用的是新的 ASP.NET Core 模板

@ChrisNevill 我也有同样的情况。重新启动 VS 使其显示出来，但它仍然灰显/不活动。你找到解决办法了吗？我使用的是 VS2015 的社区版本和较旧的 .NET Framework。

Mads Kristensen 确认它仅适用于我认为 ASP.NET Core 模板不使用的 MsBuild。所以我现在正在寻找其他解决方案。

【参考方案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 文件。

【讨论】：

另外，右键单击 Task Runner Explorer 窗格中的 watch-sass 并选择 Bindings > Project Open。现在，每次打开这个项目并更改和保存 *.scss 文件时，它都已经在监视和编译。另外，可能很明显，但是将 *.scss 文件放在 wwwroot/css 文件夹中，它会自动将生成的 *.css 文件隐藏在 sass 文件后面。

我需要重新审视这个问题，在短短一年内事情发生了很大变化，你使用 gulp 的方式（我已经从 grunt “切换”到引号，因为我几乎不是任何专家it) 是我最感兴趣的方式，它是一种原生的做事方式。所以当我回到这个问题时，我可能需要将此标记为答案。不过也感谢其他人在这里的回答，这些都是关于如何给这只猫剥皮的很好的贡献。但我喜欢原生的方式。

更多信息可以在这里找到：developer.telerik.com/featured/…

【参考方案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。添加以防其他人遇到同样的问题。

【讨论】：

这是一个有趣的新选项。

确定需要 Gulp 吗？ Web Compiler 描述或 Q&A 中没有提及它。

@st3inn 似乎是正确的。对于 webcompiler，不需要 gulp，但是如果您使用 Task Runner，则需要。

【参考方案4】：

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

WebCompiler（免费）

已经提到过，但是 Mads Kristensen（Web Essentials 的作者）创建了一个名为 Web Compiler 的独立编译工具。您所要做的就是安装它，然后右键单击要编译的任何 SASS 文件并选择 Web Compiler > Compile File。从那时起，它就会被监视，并且只要保存它，就会编译该文件。

Download Web Compiler

---

CompileSASS（免费）

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

Download Compile SASS

---

Web 工作台（免费/付费）

Mindscape's Web Workbench 是我多年来在编译 SASS 时最喜欢的扩展，但后来我转而支持免费的替代方案。不过，Pro 版是一个强大的工具，有多种自定义输出文件的方法，但考虑到那里有免费工具，它也相当昂贵（39 美元）。

Download Web WorkBench

【参考方案5】：

回答这个问题的大部分步骤与“Maverick”on this post 给出的步骤相同，这些步骤涉及如何以更少的成本做同样的事情。但是，有人不允许我将该问题更改为仅包含 sass（这可能是最好的，我不知道）。因此，以下答案依赖于 Maverick 在上述帖子中指定的步骤，但存在以下差异：

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

右键解决方案 -> 添加 -> '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"

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

然后：

依赖项 -> 右键单击​​ NPM -> 恢复包。

gruntfile.js

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

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

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

警告：我不是此类配置的专家。前段时间我在一篇优秀的博文中找到了 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”下）才能让手表观看，但随后它会在后续保存中起作用。

【讨论】：

右键解决方案 -> 添加 -> 'Grunt and Bower to Project' 对我来说没有出现。这是扩展程序吗？