Sublime Text怎么搭建Sass/SCSS环境_Sublime自动编译Sass教程-sublime-PHP中文网

首先安装node.js和dart sass，再在sublime text中通过package control安装sidebarenhancements和sass插件，接着配置自定义build system实现手动编译，最后通过sass --watch命令实现保存自动编译，完成高效scss开发环境搭建。

sublime text怎么搭建sass/scss环境_sublime自动编译sass教程

在Sublime Text中搭建Sass/SCSS开发环境并实现自动编译，主要依赖插件和外部工具配合。整个过程不复杂，关键是配置好Node.js、Sass编译器以及Sublime的监听插件。

安装Node.js与Sass编译器

要编译Sass或SCSS文件，首先需要系统中安装Sass命令行工具。推荐使用Dart Sass（官方推荐版本）：

确保已安装Node.js（可通过命令行输入 node -v 验证）
全局安装Sass：打开终端或命令提示符，运行 npm install -g sass
验证安装成功：输入 sass -v，应显示版本号

在Sublime Text中安装必要插件

通过Package Control安装以下两个关键插件：

SideBarEnhancements：增强侧边栏右键功能，方便快捷操作文件
Sass：提供SCSS/Sass语法高亮和代码提示

安装方法：按下 Ctrl+Shift+P 打开命令面板，输入 “Install Package”，搜索上述插件名并安装。

Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件，可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

配置自动编译Sass（使用Build System）

Sublime本身支持自定义构建系统，可以快速调用sass命令进行编译。

点击菜单栏 Tools → Build System → New Build System…
将内容替换为以下配置（根据你的项目结构调整路径）：

{
  "cmd": ["sass", "--no-source-map", "$file", "${file_path}/${file_base_name}.css"],
  "selector": "source.scss",
  "shell": true,
  "working_dir": "$file_path"
}