[Sass][Visual Studio] Web essentials 2015 does not compile automatically (Web essentials 2015 无法自动编译)

Visual Studio 2013 升级 Visual Studio 2015, 编译SCSS文件所遭遇到的问题.


目录

1. SASS 基本介绍与安装 (An introduction to SASS and Using SASS with Visual Studio) 
2. SASS 语法介绍1 (Variable, Mixin, and Nest structure)
3. SASS 语法介绍2 (Import, Extend, Comment, error , and @debug and @warn)
4. SASS 进阶使用 (Mathematical calculations, Selector(%), Parent selectors, List)
5. SASS 进阶使用 (Media, color function, If condition, loop(@for, @each), key-value mapping )
6. SASS 实践 : Refactor MVC base website CSS
7. SASS 问题 : Web essentials 2015 does not compile automatically

前言

此篇文章将同步发布于点部落与个人博客,如果有错误希望前辈们不吝指教,谢谢!


许多前端开发者没有习惯Visual Studio进行开发,而开发完成后,将 scss, css, 与 min.css直
接放置项目相对应的数据夹下(如:Contentcss),再进行导入(Include to project)或加入现有
项目(Add exist item)方式加入项目。






虽然css文件可以正常被导入项目(put css file into .csproj),但会变成像下面这样没有折叠
的模式。





一般我们在Visual Studio 2013中,安装Web essentials 2013套件,我们新加入一个.sass文件后,
直接保存文件,会自动编译成css, min.css,与 .map 三个文件,像下图:





但我们一但升级到Visual Studio 2015、web essentials 2015,突然发现不会自动编译,也没有分割窗口。





前往套件介绍网站,说明web essentials 2015不再自动编译,而是由 Web compiler这个套件进行编译。





 

操作步骤:

Step 1. 安装Web Compiler
             Install Web Compiler




Step 2. 右键点选.scss 文件,选择web compiler
             Right click .scss file, select web compiler




Step 3. 系统会产生对应的compilerconfig.json与compilerconfig.json.defaults
             Compilerconfig.json and compilerconfig.json.defaults are generated





Step 4. 右键点选compilerconfig.json文件,能一次编译全部的文件。
            前提是.scss曾经被web compiler编译过(输出入数据记录在compilerconfig.json文件)
            If .scss have been excuted before, you can right click compilerconfig.json, then click re-
            compile all file. (input/output data were saved in compilerconfig.json )



     
Step 5. 右键点选compilerconfig.json,点选Enable compile on build
            系统可以设定每次重新建立(Build or rebuild)的时候,进行自动编译.scss文件
            (会纪录在.csproj与package.config文件)

            Right click compilerconfig.json -> click Enable compile on build
            It will enable compile scss files on build
            (package related data will be written into .csproj file and package.config file)





 

参考数据:

Web Essentials 2015.1
https://visualstudiogallery.msdn.microsoft.com/ee6e6d8c-c837-41fb-886a-6b50ae2d06a2

Web Essentials 2015不再支持SCSS/LESS自动编译
http://blog.darkthread.net/post-2015-07-21-web-compiler-for-vs2015.aspx