https://blog.csdn.net/weixin_43834227/article/details/106057473
live sass compiler 插件可实时自动将sass解析成css,同时可以自动添加css 兼容性前缀,-webkit-,-moz-, -ms-,-o-等。
我们平时在做一些简单项目,比如说单一活动页面,并不需要搭建前端自动化的框架时,可以使用vs code 的live sass compiler插件,自动将scss转换为css,以下为使用步骤。
在vs code扩展中搜索live sass compiler 并安装。
在设置中搜索live sass compiler ,在setting.json中添加配置。可根据需要进行修改。
以下为配置代码:
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css"
},
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 3 versions"
],
更多配置项详见: live sass compiler
在项目的css 文件夹下新建一个index.scss 文件,在vscode编辑器中启动live sass compiler ,会自动生成对应的index.css 文件。
我使用的是快捷键ctrl+shift+p 找到live sass compiler ,点击运行即可。
4.直接在index.scss 编写css代码即可,插件会自动解析到对应名字的css文件中。