Vscode中scss,less转css插件,热更新插件,vscode直接预览插件

日常使用vue框架，安装“node-sass”即可轻松使用scss。但是官网要求使用jquery写，如果直接写css，效率就会慢很多，发现vscode中有插件可以直接把less，scss文件转为同目录下的css文件，并且还有压缩版的min.css哦!

less转css插件

scss转css插件

安装后即可轻松使用less,scss。

热更新插件

安装后如何使用呢?

打开vscode 命令面板

window：ctrl+shift+p（如果快捷键冲突的话直接点上面工具条：查看 => 命令面板）

MAC：自行百度吧，没用过苹果电脑。

启用live server

搜索"live server", 选择"open with live server, 然后右下角就会有"Go Live"，点击即可实现当前项目的热更新，当你保存文件后浏览器会自动更新哦！

注意：每个项目都要启用一次哦！

vscode直接预览插件 Browser Preview

如果只有一台电脑，不想总是切换到浏览器查看效果，可以使用这个插件，就可以实现vscode内预览页面，效果如下

打开插件管理，然后搜索"Browser Preview"插件，直接进行安装。

安装完成后，就可以发现左侧的bar中会增加了一项（参考上边的效果图）。直接点击即可出现右侧的浏览器，
然后输入你当前正在编辑的页面地址即可。