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

asp.net CSS

猪猪老丝

2020-03-18

如何在Visual Studio 2015中启动并运行完整的sass(即scss)预编译器环境?对于这个问题,这是一个较少涉及的同级问题

第2145篇《如何在Visual Studio 2015中保存时编译.sass文件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
小哥阳光 2020.03.18

如果您不想弄乱手动设置编译的复杂性,可以使用许多非常简单的扩展来为您解决:

WebCompiler(免费)

已经提到过它,但是Mads Kristensen(Web Essentials的作者)创建了一个名为Web Compiler的独立编译工具您所要做的就是安装它,然后右键单击要编译的任何SASS文件,然后选择“ Web编译器”>“编译文件”。从那时起,将对其进行监视并随时对其进行保存,将对文件进行编译。

下载Web编译器


CompassSASS(免费)

与Web编译器类似,这是一个独立的扩展,它被创建为可在VS2013VS2015中使用,因为从流行的Web Essentials扩展中删除了编译。它是轻量级的,并且可以很好地完成错误报告。此处阅读有关扩展的作者博客

下载编译SASS


Web工作台(免费/付费)

多年来,在编译SASS时,Mindscape的Web Workbench是我最喜欢的扩展,但是自那以后,我便不再使用免费的替代程序了。Pro版本仍然是一个功能强大的工具,可以通过多种方式来自定义输出文件,但考虑到那里提供免费工具,它也相当昂贵(39美元)。

下载Web WorkBench

西门Pro 2020.03.18

This can also be achieved without gulp or grunt by simply clicking your way in Visual Studio.

Install Web Compiler

  1. In Visual Studio, press Tools -> Extensions and updates.
  2. Search for Web Compiler (created by Mads Kristensen) and install.
  3. Restart of Visual Studio will be needed.

Compile files

  1. Right-click the .scss-file in Solution Explorer to setup compilation.
  2. Press Web Compiler -> Compile File (Shift+Alt+Q).

A file called compilerconfig.json is created in the root of the project where you can modify the behavior of the compiler. Right-clicking the compilerconfig.json file let’s you easily run all the configured compilers.

Any time a .scssfile is modified within Visual Studio, the compiler runs automatically to produces the compiled output file.

Compile on Build

  1. Right-click the compilerconfig.json file
  2. Press Web Compiler -> Enable compile on build
  3. Clicking the menu item will prompt you with information that a NuGet package will be installed into the packages folder without adding any files to the project itself. The NuGet package contains an MSBuild task that will run the exact same compilers on the compilerconfig.json file in the root of the project.
理查德西门Near 2020.03.18

VS2015的Web编译器扩展

必填项。npm install -g gulp

希望这对您有所帮助...

编辑:

Web编译器本不应该将字符串转换为Unicode字符时遇到问题。在VS2015中切换到了该实现 http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/,它可以正确编译CSS。以防万一其他人遇到相同的问题。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android