日常使用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中会增加了一项(参考上边的效果图)。直接点击即可出现右侧的浏览器,
然后输入你当前正在编辑的页面地址即可。

Logo

前往低代码交流专区

更多推荐