现有主流前端框架如Vue，React都有自己的脚手架，一键就能搭建起前端项目的架子，基本都带有Node本地服务器，还能监视代码，Typescript，Scss一类的超集语言都可以实时编译。
如果只是一般的项目，不使用框架的项目，要使用Scss的话就得自己手动编译，好在VSCode上已经有实时编译的插件了，就是Live Sass Compiler。

配置

安装

从插件商店里下载安装即可。

配置文件

在首选项 - 设置里可以找到插件的相关配置，点击在settings.json中会跳转到json配置文件中。
不同项目可能需要的配置不同，可以点开工作区的设置，会在当前项目目录下创建一个.vscode/settings.json文件。

插件作者也给出了配置文档，配置项不多且描述的很详细了，这里就不多赘述。
配置项中有一项autoprefix很有用，可以自动加上-webkit一类的前缀。

下面是我的一个项目配置，可供参考。

{
    "liveSassCompile.settings.formats": [{
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "/source/css"
    }],

    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ],

    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**"
    ],

    "liveSassCompile.settings.generateMap": false
}

监视文件

插件装好后，VSCode右下角会多出一个Watch Sass的按钮，打开后就会监视打开项目的scss文件，文件只要发生修改，就会重新编译并生成文件。

私有文件

事实上我们最后也许只需要一个style.min.css文件，那么可以给不想被编译的文件加上_前缀，这样就不会被编译器单独编译，但是仍然会被监听，比如在其他文件@import了该文件时，该文件发生变动仍然会触发父文件的重新编译。

所以我们可以如下组织代码，style.scss中@import所有模块最终编译成style.min.css。

@import "./_common";
@import "./_loader.scss";

@import "./_header.scss";
@import "./_aside.scss";
@import "./_sidebar.scss";

@import "./_main.scss";
@import "./_post.scss";
@import "./_post_content.scss";
@import "./_archive.scss";
@import "./_code.scss";

@import "./_media.scss";

使用

scss较css相比，嵌套语法直观很多，全局变量用在颜色动画等地方也是非常好用。插件的安装配置也非常简单，除了基本的编译之外还能自动添加浏览器引擎前缀，如果你的项目还在使用css，建议也尝试切换到scss。