Live Sass Compiler 是一个用于 Visual Studio Code 的扩展,可以帮助开发者将 Sass 或 Scss 文件实时编译为 CSS 文件。以下是 Live Sass Compiler 的配置方法
:
安装
打开 Visual Studio Code。
按下
Ctrl+P
,输入
ext install glenn2223.live-sass
并回车,安装 Live Sass Compiler 扩展
。
使用
启动实时编译:点击状态栏中的 "Watch Sass" 按钮,或者按下
F1
或
Ctrl+Shift+P
,输入
Live Sass: Watch Sass
并回车
。
停止实时编译:点击状态栏中的 "Stop Watching Sass" 按钮,或者按下
F1
或
Ctrl+Shift+P
,输入
Live Sass: Stop Watching Sass
并回车
。
一次性编译:按下
F1
或
Ctrl+Shift+P
,输入
Live Sass: Compile Sass - Without Watch Mode
并回车
。
配置
在 VS Code 的
settings.json
文件中可以进行以下配置:
{
"liveSassCompile.settings.formats": [
{
"format": "expanded", // 编译后的 CSS 格式,可选值为 expanded、compact、compressed、nested
"extensionName": ".css", // 编译后的文件后缀名
"savePath": null // 编译后文件的保存路径
},
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/dist/css"
}
],
"liveSassCompile.settings.excludeList": [
"/**/node_modules/**", // 排除的文件夹路径
"/**/.vscode/**"
],
"liveSassCompile.settings.generateMap": false, // 是否生成 source map 文件
"liveSassCompile.settings.autoprefix": [ // 自动添加浏览器前缀的配置
"> 1%",
"last 2 versions"
]}
其他设置liveSassCompile.settings.watchOnLaunch
:定义是否在启动时立即开始监听,而不是等待手动启动。默认值为
false
。
liveSassCompile.settings.compileOnWatch
:定义在开始监听时是否编译所有文件。默认值为
true
。
liveSassCompile.settings.forceBaseDirectory
:定义一个子目录作为搜索起点,提高性能
。
liveSassCompile.settings.rootIsWorkspace
:定义路径是否相对于工作区根目录。默认值为
false
。
通过合理配置这些选项,可以使得工作流程变得更加高效与自动化
。