Visual Studio 2022 Mac版：如何编译SASS文件？

由于VS2022 Mac版目前没有官方或主流的SASS编译扩展，推荐以下几种实用方案：

1. 通过Node.js的Sass包编译（最通用） #

• 先确保你的Mac上安装了Node.js，然后打开终端全局安装Sass：
  npm install -g sass
• 基础编译命令：
  • 单次编译：sass 源文件路径 输出文件路径，比如 sass src/styles/main.scss dist/css/main.css
  • 监听文件变化自动编译：sass --watch 源目录:输出目录，比如 sass --watch src/styles:dist/css
• 进阶用法：可以把编译命令写到项目的package.json的scripts字段里，方便快速调用：

  "scripts": {
    "sass:dev": "sass --watch src/styles:dist/css --style expanded",
    "sass:build": "sass src/styles:dist/css --style compressed"
  }
  

  之后在终端运行npm run sass:dev启动开发监听，或npm run sass:build生成压缩后的生产版本。

2. 利用VS Mac的任务运行器集成 #

• 打开VS2022 Mac，点击顶部菜单：视图 > 其他窗口 > 任务运行器
• 在任务运行器窗口中点击添加任务，选择自定义任务
• 配置任务信息：
  • 任务名称：比如「Sass自动编译」
  • 命令：填sass
  • 参数：填--watch src/styles:dist/css（根据你的目录结构调整）
  • 工作目录：选择你的项目根文件夹
• 保存后，只需在任务运行器里点击启动按钮，就能在VS内部自动编译SASS了。

3. 使用第三方可视化工具（如CodeKit） #

• 下载安装CodeKit，将你的项目文件夹拖入工具中
• 工具会自动识别SASS文件，你可以在设置里指定输出路径、是否压缩、是否生成源映射等选项
• 之后只要修改SASS文件，CodeKit就会自动完成编译，无需手动操作。

内容的提问来源于stack exchange，提问作者PixelPaul