vscode sass/css实时预编译为css

2022-05-09 585 阅读1分钟

安装 live sass compiler 插件

直接在插件库搜索安装即可，安装完毕之后，在右下角会有一个一下标识，点击 “Wacth Sass” 即可开始实时编译为css

live sass compiler 自定义方法

1、去除`.map`文件

默认情况下，实时编译之后，会产生一个css文件，一个.css.map 文件

我们可以通过setting.json添加以下配置

"liveSassCompile.settings.formats": [
    {
        "format": "compressed", // compressed压缩css expanded展开
        "extensionName": ".css",
	"savePath": null
    }
],
"liveSassCompile.settings.generateMap": false, // 不生成.map文件

2、样式兼容加入浏览器兼容，如前缀 `-webkit`,`-moz`, `-o`等

同样是在setting.json中加入以下配置：

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

3、过滤一些文件夹不去实时监听

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