1、先在VSCode上面安装插件：Live Sass Compiler
2、创建好scss文件夹文件和css文件夹
3、然后在VSCode的控制台上打开Live sass watching模式（控制台的打开方式为：Ctrl+Shift+p）就可以编译scss代码了，开启sass watching之后可以实时更新css文件
4、最后在VSCode的配置里修改css文件的输出目录
配置css文件的输出目录
先在设置里面找到liveSassCompile.settings.formats修改里面的默认配置项，并复制
然后在setting.json里面加入
{
"workbench.iconTheme": "vscode-icons",
"vsicons.dontShowNewVersionMessage": true,
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
"workbench.startupEditor": "newUntitledFile",
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css"
}
]
}
"savePath": "~/../css"就是css文件输出的路径
如果vscode里面没有 "liveSassCompile.settings.formats"的配置项，可以直接复制上面的代码到sass的配置文件中；
设置完成后就可以使用scss了