后台大哥请进一步：使用Visual Studio编译scss和souce map实现前后端的完美结合

---

title: 后台大哥请进一步：使用Visual Studio编译scss和souce map实现前后端的完美结合

date: 2020-06-28

sidebarDepth: 2

tags:

• windows
• Visual studio
• scss
• css
  
  categories:
• 开发
• 微软技术
• windows

---

CSS设计是一种禅道，既是项目质量的体现，也是团队协同标尺，更是项目精益化的卓越体验，而微软的Visual studio工具完美支持现代软件研发，其单元测试、回归测试、云端发布、现代编译思维，无不敏捷的表现在细节之中，关键在于我们如何取用。

• 何为scss
• 什么是Source map
• 引入scss和统一全局css的必要性
• 比上不足，比下自我踌躇
• 开始Visual Studio的scss和souce map开发之旅
• 进一步优化scss及自动发布
• 技术多学点：Visual Studio插件所在目录

作为一名全栈开发者，十余年专注web前端研发，逐浪CMS发哥渴望上进，并认为：

• 技术适当向前一步、储备足够的新技术，
• 实施则适当退后、确保足够的兼容并蓄
  
  这是软件实施与研发的“天人合一”。

然而，作为一名开发者，仅仅只专注于本身技术，而不能对全栈生态有着良好的把握，在现代软件开发或者工程实施中，这也许远远不够。

何为scss

简单的说，scss就是一种css的预编译技术，它可以实现css参数引用以及快速写作。

与之相近的技术，还有less、stylus等。

目前scss是业界最流行的css预编译标准，包括在bootstrap诸多项目中，都提供了面向scss的支持。

如同我们所知识的，scss默认是不能直接使用的，需要预编译，比如使用ruby等技术进行编译，相关知识可以访问

• 1.安装ruby与sass环境 http://code.z01.com/doc/vscode.html
• 2.sass与scss中文手册 http://code.z01.com/Sass/

什么是Source map

简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

现代软件开发中，CSS和JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。

而引用了Source map技术后，可以方便我们快速检索源码，提升开发效率。

下图演示了引用Source map后，在chrome浏览器调试中，快速定位css在scss中源的方法：

关于Source map技术可以访问 https://www.z01.com/help/web/3207.shtml 获得进一步的完整信息。

引入scss和统一全局css的必要性

css是一种禅

基于scss管理css，可以使网站的前端表现得到分层化的管理，从而提升整个项目的代码质量。

CSS设计是一种禅道，既是项目质量的体现，也是团队协同标尺，更是项目精益化的卓越体验，而微软的Visual studio工具完美支持现代软件研发，其单元测试、回归测试、云端发布、现代编译思维，无不敏捷的表现在细节之中，关键在于我们如何取用。

css是一种管理思想

基于统一的scss管理，实现类名、样式、规范统一，可以使站点质量提升。

在Zoomla!逐浪CMS的研发和项目开发中，我们始终恪求交付用的包括完整的.map和scss，这样的好处是，客户可以快速的进行二次开发，并由此溯源--即使大多客户并不认识现代化的node编译与生产。

css是一种团队精神

统一的css和scss，代表了高技术的团队融合和步调一致，在逐浪CMS的开源库中，我们可以看到自主的逐浪CMS内核与zico图标库完美的结合，提升软件的质量。

css是一种产品质量观

统一css和scss，就是统一产品规范，如果一个网站连css都不能规范，做到哪，就抄到哪，显然是没有质量的。

在推进CSS规范与标准化的路上，著名css布道师张鑫旭关于“CSS设计理念”，是目前业界的一座丰碑，而逐浪CMS是实施的标杆。

可以想象，那种没有层级、规范、规划的项目，做到哪里就写到哪里、到处链接<style>.....的代码，就跟到处拉屎的鸟一样，是一件让人头疼的事，也不值得推崇。

比上不足，比下自我踌躇

这里需要提一下，当前中国web开发或者软件研发中的一种不良风气，我们称它为“比上不足、自比正我踌躇。

这种风气一般的表现是：

• 当你要某人做一个前端呈现，托辞：我是做后台的，前端不感兴趣。
• 当你要他写一个算法，托辞：我主要兴趣在前端，后端算法都是公开的啦，随便去github看看就知道了。
• 当你要他发个内容或写文档，托辞是：我是做全栈开发的，文档写作不是特长。
• 当你要他写好一个功能模块，托辞则是：我做好了功能，你安排一个好的前端，产品没做好是前端的责任。

于是，我们看到，这些人捧着不要重复造轮子，日复一日的做着低效的开发，做纯正的大自然搬运工。

具体在本案中，就表现在很多Visual Studio开发者，只满足于简单的使用工具本身，而不会去充分认识时代的变化，去迎接改变。

其实作为微软，很早就认识到了web的改变，引入组件、扩展，并从Visual Studio 2013开始就支持各种开源包、移动开发和单页应用。

在Visual Studio中引入scss和souce map开发，其实是很简单，重要的是迈出开发者的关键一步，知行合一。

不幸的是，不少微软开发者在visual studio之上，明明掌握着最优秀的设计工具，却说：这需要第三方设计工具才能解决，我只是一个做后台的，无法对scss实现编译，这和我无关。

这也无关，那也无关，一关，就到项目鬼门关,这也是本文对话后台大哥的缘由。

开始Visual Studio的scss和souce map开发之旅

好了，下面开始Visual Studio的scss和1souce map`开发之旅。

其实，要实现这个功能很容易，只要在visual studio中安装Web Compiler插件即可。

Web Compiler,顾名思义，就是web编译器的意思，其说明上也介绍了支持less、scss、stylus、jsxs等编译。

点击扩展-管理扩展，搜索：Web Compiler插件，安装，上手。

如果你在这里安装不成功，或需要完整的文档，可以访问微软visual studio 扩展应用市场下载，地址是：

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler

安装成功后，让我们来看编辑，只要建立一个scss文件，点击右键就能编译了，快捷键：Shift+ALT+Q

进一步优化scss及自动发布

开发者只要根据官方文档指引，在项目根目录建立一个compilerconfig.json文件，就能自动编译scss并实现source map的输出。

下面是compilerconfig.json文件的基本格式,忙的同学可以直接拿去用：

[
    {
      "outputFile": "output/site.css",
      "inputFile": "input/site.less",
      "minify": {
        "enabled": true
      },
      "options": {
        "sourceMap": true
      }
    },
    {
      "outputFile": "output/scss.css",
      "inputFile": "input/scss.scss",
      "minify": {
        "enabled": true
      },
      "options": {
        "sourceMap": true
      }
    },
    {
      "outputFile": "Content/style.css",
      "inputFile": "Content/style.scss",
      "minify": {
        "enabled": true
      },
      "options": {
        "sourceMap": true
      }
    }
  ]

这样，你在写作scss时，就再也不需要头痛其编译麻烦了，同时也能与前端同事和谐共处，让代码效率更加严谨，落霞与孤鹜齐飞，岂不美哉？

技术多学点：Visual Studio插件所在目录

# VS2010默认位置
C:\Users\Administrator\AppData\Local\Microsoft\VisualStudio\10.0\Extensions

# vs2019的默认位置
C:\Users\[用户名]\AppData\Local\Microsoft\VisualStudio\16.0_a8e79a7c\Extensions