跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

Sublime怎么配置SCSS编译环境 Sublime实时转CSS样式教程【手册】

Sublime Text 本身不编译 SCSS,所谓“实时转 CSS”本质是调用外部 sass 命令行工具 + 插件触发机制;没装对 sass 或路径没对上,保存就静默失败。 Sublime Text 本身不编译 SCSS,所谓“实时转 CSS”本质是调用外部
sass
命令行工具 + 插件触发机制;没装对
sass
或路径没对上,保存就静默失败,连错误都不报。 确认
sass
已全局安装且可执行 这是 90% 编译失败的根源。插件只是喊一声“
sass
,干活!”,如果系统根本听不见,就卡住不动。 终端运行
sass --version
,必须输出类似
1.77.6
;没反应?说明没装或没进 PATH 务必用
npm install -g sass
(别用
node-sass
,已废弃,不支持
@use
) macOS 用户若从 Dock 启动 Sublime,常因 GUI 环境没加载 shell PATH,导致找不到
sass
;解决办法:终端里运行
subl
启动编辑器 Windows 用户查
sass
实际路径:
npm config get prefix
,再拼上
\sass.cmd
(例如
C:\Users\Alice\AppData\Roaming\npm\sass.cmd
) 用
SublimeOnSaveBuild
+ 自定义构建系统最稳 比 LiveSassCompiler、SCSS 插件更透明、出错能直接看到原始
sass
报错,适合真要调试语法或路径问题的人。 Package Control 安装
SublimeOnSaveBuild
菜单 → Tools → Build System → New Build System…,贴入:
{ "cmd": ["sass", "--no-source-map", "$file", "$file_path/$file_base_name.css"], "selector": "source.scss", "path": "/usr/local/bin:/opt/homebrew/bin", "shell": true }
path
值按你本地
sass
路径填(macOS 用
which sass
查;Windows 填上面查到的完整目录)
$file_base_name.css
是关键:保证每个
.scss
输出独立
.css
,不会互相覆盖 保存为
Sass.sublime-build
到
Packages/User/
目录,然后右下角状态栏手动选中它 为什么保存后没生成 CSS?先盯这几个点 不是插件坏了,大概率是文件没被识别、路径错了,或者语法越界了。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 立即学习 “ 前端免费学习笔记(深入) ”; 右下角状态栏必须显示
SCSS
(不是
CSS
或空白),否则
selector
不匹配,构建系统压根不触发 文件必须已保存(不能是未命名的临时标签页),否则
$file
解析为空,报
File to read not found
遇到
Invalid CSS after "@use"
:Dart Sass 要求
@use
后必须跟
{
,不能分号结尾;也确认你没把
_partial.scss
当入口文件——带下划线的不会被编译 输出路径含中文或空格?某些旧插件会崩;移到
C:/dev/
或
~/code/
这类干净路径下试试 别信“全自动实时监听”,真
--watch
交给终端 Sublime 插件模拟的 watch 可靠性差,容易漏触发、卡死、不报错。开发时建议另开终端,cd 到项目目录,直接跑:
sass --watch src/style.scss:dist/style.css --style=compressed
这样能第一时间看到编译错误(比如变量未定义、路径错)、热重载也更准 Sublime 只负责写代码,终端负责编译,职责清晰,排查问题时不用猜“是插件没起作用,还是 sass 没跑起来” 如果非要 Sublime 内集成,
SublimeOnSaveBuild
配合手动
Ctrl+B
比任何“自动监听”都可靠

相关文章